Sidebar

Collapsible app sidebar with sketch divider and toggle. Compose with SidebarLayout and SidebarInset.

Main content beside the sketch sidebar.

Roughness1.5Lock seedAnimate

<SidebarProvider roughness={1.5}>
  <SidebarLayout>
    <Sidebar>...</Sidebar>
    <SidebarInset>...</SidebarInset>
  </SidebarLayout>
</SidebarProvider>

CLI install

npx doodleui-react add sidebar

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarInset,
  SidebarItem,
  SidebarLayout,
  SidebarProvider,
  SidebarTrigger,
} from "doodleui-react";

<SidebarProvider>
  <SidebarLayout>
    <Sidebar>
      <SidebarTrigger />
      <SidebarContent>
        <SidebarItem active>Home</SidebarItem>
      </SidebarContent>
    </Sidebar>
    <SidebarInset>Main</SidebarInset>
  </SidebarLayout>
</SidebarProvider>

Props

Prop	Type	Default	Notes
defaultCollapsed	boolean	false	Start in icon-only collapsed width on SidebarProvider.
defaultOpen	boolean	true	Whether Sidebar is visible.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.