AG Design System

Component

Sidebar

Composable, themeable sidebar with icon-collapse, Sheet mobile drawer, and SidebarGroup / SidebarMenu primitives matching shadcn.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add sidebar

This item delegates to the public shadcn registry. AG-themed variants still require npx shadcn@latest add https://design.ag.org/r/ag-globals.

Usage

Wrap your layout in SidebarProvider. Compose Sidebar with SidebarHeader, SidebarContent (SidebarGroup + SidebarMenu), SidebarFooter, and SidebarRail. Wrap page content in SidebarInset.

Composition

ButtonInputSkeleton

Playground

Preview
Main content

Configure

Yes

Show the brand logo and app name in the sidebar header.

Yes

Show the search input in the sidebar header.

Code

<SidebarProvider>
  <Sidebar>
    <SidebarHeader className="gap-2 border-b p-2">
    <div className="flex items-center gap-2">
      <img src="/logo.png" alt="My App" width={28} height={28} className="object-contain" />
      <span className="font-medium text-sm">My App</span>
    </div>
    <input
      type="search"
      placeholder="Search…"
      className="h-8 w-full rounded-md border border-sidebar-border bg-sidebar-accent/60 px-2.5 text-xs"
    />
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Guides</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton isActive tooltip="Getting Started" render={<Link href="/docs/getting-started" />}>
                Getting Started
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
    <SidebarFooter />
    <SidebarRail />
  </Sidebar>
  <SidebarInset>{children}</SidebarInset>
</SidebarProvider>

Variants & States

Supported variants, sizes, and interaction states for this component.

Configurations

  • Default (logo + search)
  • Without search

Do

  • Wrap your root layout in SidebarProvider and place main content in SidebarInset
  • Use SidebarGroup + SidebarGroupLabel + SidebarMenu + SidebarMenuButton for navigation
  • Add SidebarRail as the last child of Sidebar for the collapse toggle rail
  • Place SidebarTrigger in the mobile header; use tooltip on menu buttons for collapsed labels

Don't

  • Don't use more than 3 nesting levels, flatten the structure instead
  • Don't put destructive actions (like 'Delete') in the nav, use a toolbar or context menu
  • Don't hardcode widths, use the --sidebar-width CSS variable so themes can override it