Sidebar
Installation
$npx shadcn-macos@latest add sidebar
Examples
macOS Sidebar Demo
downloads
Selected Item View · APFS Volume
Active
downloads_Folder_1Aug 2026
downloads_Folder_2Aug 2026
downloads_Folder_3Aug 2026
downloads_Folder_4Aug 2026
downloads_Folder_5Aug 2026
downloads_Folder_6Aug 2026
downloads_Folder_7Aug 2026
downloads_Folder_8Aug 2026
downloads_Folder_9Aug 2026
Props
<SidebarProvider />| Prop | Type | Default | Description |
|---|---|---|---|
| defaultOpen | boolean | true | Initial open/expanded state of sidebar. |
| width | string | "w-56" | Tailwind width class when sidebar is expanded. |
| collapsedWidth | string | "w-14" | Tailwind width class when sidebar is collapsed. |
<SidebarMenuButton />| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | false | Whether the item is currently selected with system blue highlight. |
| icon | React.ReactNode | — | Leading icon element. |
| badge | React.ReactNode | — | Trailing badge or counter pill. |
| onClick | () => void | — | Click handler. |