App Sidebar
App sidebar with grouped navigation, badges and a user card; collapses to an icon rail.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
AppSidebarProps
Also accepts all props of React.ComponentProps<"div">
| Prop | Type | Default | Description |
|---|---|---|---|
| brand* required | React.ReactNode | — | — |
| brandIcon | React.ReactNode | — | Small mark shown when collapsed; defaults to the brand |
| groups* required | SidebarGroup[] | — | — |
| user | { name: string; email: string; initials: string } | — | — |
| defaultCollapsed | boolean | false | — |
| collapseBelow | number | — | Starts collapsed while the viewport is narrower than this many px, until the user toggles it |
| collapsible | boolean | true | — |
| width | number | 256 | Expanded width in px |
| accentColor | string | "#f97316" | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/app-sidebar.jsonThe CLI installs the base component; your customizations live in the code generated on the Customize tab.