Sidebar

Composable app sidebar. SidebarHeader is the top bar (black container only); put your content inside it (e.g. Organization component). SidebarGroupLabel + SidebarMenu build the nav. Preview uses static layout; real component uses fixed positioning.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sidebar.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

Section

Main content (SidebarInset)

Usage

How to use this component in your code.

// SidebarHeader = black bar only; put e.g. <Organization /> inside it
<SidebarProvider>
  <Sidebar variant="inset">
    <SidebarHeader>
      <SidebarMenu>
        <SidebarMenuItem>
          <SidebarMenuButton size="lg" asChild>
            <Link href="/">
              <Organization name="Your org" tagline="Tagline" logo={<Logo />} />
            </Link>
          </SidebarMenuItem>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Section</SidebarGroupLabel>
        <SidebarGroupContent>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton asChild><Link href="/dashboard">Dashboard</Link></SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
  <SidebarInset>{/* main content */}</SidebarInset>
</SidebarProvider>