Sidebar

sidebarPage structure

The app's navigation rail: a fixed column on desktop and a sheet on a phone. The full Sidebar needs the whole viewport, so see it live in the App shell block; the menu parts below render anywhere.

Registry JSON
bunx --bun shadcn@4.17.0 add @waimakers/sidebar
Kit dependencies
utilsthemebuttonseparator
npm dependencies
@base-ui/react@1.9.0class-variance-authority@0.7.1lucide-react@1.33.0

From the registry

The shadcn sidebar composite on Base UI, not Radix: the rail is the second neutral layer (--sidebar → --surface-sunken), the active item wears the accent WASH plus a saturated leading rule (never orange text), hover lifts to the paper surface, and mobile is a Base UI Dialog drawer. Supports offcanvas and none; icon-collapse and its tooltip are left out on purpose.

Examples

Menu groups

Group labels, menu buttons and the active item, which carries the accent bar and aria-current.

Workspace

Sub menu

Nest a short list under one item with SidebarMenuSub.

Sizes

Small for dense lists, large for an account row with two lines.

States

Disabled items refuse clicks. The focus ring is the shared text-colour outline.

Full sidebar

SidebarProvider, Sidebar, SidebarInset and SidebarTrigger take over the viewport. Open the App shell block to use them.

<SidebarProvider cookieName="office_sidebar" title="Office navigation">
  <Sidebar collapsible="offcanvas">
    <SidebarHeader>
      <BrandLockup product="office" />
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarMenu>{items}</SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>Signed in as Anna</SidebarFooter>
    <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <SidebarTrigger />
    <main>{children}</main>
  </SidebarInset>
</SidebarProvider>
tsx
See it live in App shell