Sidebar

A collapsible sidebar with menu groups. Open and collapsed states are pinned so the preview does not drift.

Preview

Acme Inc

Application

Inbox

Installation

$ pnpm dlx shadcn@latest add https://stylexcn.vercel.app/r/sidebar.json

$ pnpm dlx shadcn@latest add @stylexcn/sidebar

Usage

<SidebarProvider open>
  <Sidebar collapsible="none">
    <SidebarHeader>Acme Inc</SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Application</SidebarGroupLabel>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton isActive>Home</SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>Inbox</SidebarInset>
</SidebarProvider>