For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Sidebar

An app-shell sidebar that collapses offcanvas or to icons and becomes a sheet on small screens.

Platform

Dashboard
Inbox
Invoices
Customers

Account

Billing
Settings

Invoices

Outstanding$12,480.00

Paid this month$38,920.00

Overdue3

Acme Inc.INV-1042$1,200.00
GlobexINV-1043$860.00
InitechINV-1044$2,450.00
UmbrellaINV-1045$640.00
HooliINV-1046$3,100.00

When to use

Use when: The main navigation of an app, collapsible on desktop and a sheet on mobile.
Avoid when: A site with a few top-level pages; use Navigation Menu.

Installation

bunx shelf add sidebar

The source lands in src/components/ui/sidebar.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarFooter, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar";

<SidebarProvider>
  <Sidebar collapsible="icon">
    <SidebarHeader>…</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Workspace</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive tooltip="Inbox" render={<a href="/inbox" />}>
              <InboxIcon /> <span>Inbox</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter>…</SidebarFooter>
  </Sidebar>
  <SidebarInset>
    <header><SidebarTrigger /></header>
  </SidebarInset>
</SidebarProvider>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: Button, Drawer, foundations, Icons, Separator, Tooltip, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: Optional native Figma library. See Designers.