Components
Foundations
Feedback
Sidebar
Composable app sidebar. No top header by default. Use SidebarContent (nav groups + SidebarBrand at bottom), then SidebarFooter. SidebarGroupLabel + SidebarMenu build the nav; SidebarBrand holds logo/wordmark above the footer. Same component and styling as the demo app sidebar.
Installation
Install this component via the shadcn CLI.
npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sidebar.jsonOr install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json
Preview
Interactive component demo.
Usage
How to use this component in your code.
// Nav first, then SidebarBrand (logo) at bottom of content, then SidebarFooter
<SidebarProvider>
<Sidebar variant="inset">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Section.</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton asChild><Link href="/views/projects">Projects</Link></SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
<SidebarBrand className="mt-auto">
<Link href="/"><img src="/logo.svg" alt="Brand" className="h-6" /></Link>
</SidebarBrand>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg">Account</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
</Sidebar>
<SidebarInset>{/* main content */}</SidebarInset>
</SidebarProvider>