Composed
Sidebar
The wide navigation that replaces the rail on workspace screens.
Channels
RSRoktim S.
Search shows ⌘ K and opens the palette.
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/sidebar.jsonRail or sidebar, never both
Screens use one or the other. The rail is for screens whose content is the whole point; the sidebar is for screens where navigating between many named things is the task.
The search field is a button
It displays ⌘ K, so clicking it opens the command palette — a control that advertises a shortcut has to honour it. It dispatches a DOM event rather than taking a callback, because it renders deep inside screens that have no provider above them.
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | — | SidebarItem. Sized 16. |
| label | string | — | SidebarItem, SidebarSection, ChannelItem. |
| count | string | — | SidebarItem. A badge — unread, overdue. |
| active | boolean | false | SidebarItem. Sets aria-current. |
| swatch | string | — | ChannelItem. An identity hue, not a status. |