Sidebar
A composable, themeable and customizable sidebar component. Created by Shadcn, animated by Animate UI, updated by malinskibeniamin.
Made by malinskibeniaminPowered by
Installation
A sidebar that collapses to icons.
When to use
Sidebars provide persistent navigation and complementary content. Use this decision tree:
Usage
<SidebarProvider>
<Sidebar>
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>Item 1</SidebarMenuItem>
<SidebarMenuItem>Item 2</SidebarMenuItem>
<SidebarMenuItem>Item 3</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Label 1</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>Item 1</SidebarMenuItem>
<SidebarMenuItem>Item 2</SidebarMenuItem>
<SidebarMenuItem>Item 3</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
<SidebarGroup>
<SidebarGroupLabel>Label 2</SidebarGroupLabel>
<SidebarMenu>
<SidebarMenuItem>Item 1</SidebarMenuItem>
<SidebarMenuItem>Item 2</SidebarMenuItem>
<SidebarMenuItem>Item 3</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
<SidebarMenuItem>Item 1</SidebarMenuItem>
<SidebarMenuItem>Item 2</SidebarMenuItem>
<SidebarMenuItem>Item 3</SidebarMenuItem>
</SidebarMenu>
</SidebarFooter>
<SidebarRail />
</Sidebar>
<SidebarInset>
<SidebarTrigger />
{...}
</SidebarInset>
</SidebarProvider>Props
Animate UI props
Sidebar
Prop
Type
Examples
Cloud UI
An example sidebar representation for Cloud UI.
Cloud UI (With Billing credits)
An example sidebar representation for Cloud UI with billing credits for a free trial.
Cloud UI (With Billing expired)
An example sidebar representation for Cloud UI with billing free trial expired.
Cloud UI (Cluster)
An example sidebar representation for Cloud UI within a cluster.
Cloud UI (Serverless)
An example sidebar representation for Cloud UI within a serverless cluster.
Console UI
An example sidebar representation for Console UI.
Console UI (Self-hosted)
An example sidebar representation for self-hosted Console UI.
Admin UI
An example sidebar representation for Admin UI.
Credits
- We take our inspiration from Shadcn UI for the sidebar component and styling.
- We use Animate UI from imskyleen for all the animations.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- patchv0.3.1**Accordion** - `AccordionTrigger` now shows `cursor-pointer` on hover.#112