A workspace app sidebar with a keyboard-friendly workspace switcher, sections with counts, collapsible favorites, a usage card with an upgrade button and a user menu.
Inbox
npx shadcn@latest add https://hyperblur.dev/r/sidebar-workspace.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-workspace.tsx.
import { SidebarWorkspace } from "@/components/hyperblur/sidebar-workspace"
<div style={{ height: 600 }}><SidebarWorkspace onCreateWorkspace={() => {}} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| workspaces | { id: string; name: string; plan?: string; color?: string }[] | sample workspaces | Workspaces listed in the switcher dropdown. |
| workspace | string | Controlled current workspace id. Pair with onWorkspaceChange. | |
| defaultWorkspace | string | first workspace | Initial workspace id when uncontrolled. |
| onWorkspaceChange | (id: string) => void | Called when a workspace is picked. | |
| onCreateWorkspace | () => void | Adds a Create workspace action to the dropdown when provided. | |
| sections | { label?: string; items: { id: string; label: string; icon?: ReactNode; count?: number | string; href?: string }[] }[] | sample sections | Navigation sections. `count` shows a number at the end of the row. |
| favorites | { id: string; label: string; color?: string }[] | sample favorites | Items in the collapsible favorites group. The group is hidden when the list is empty. |
| favoritesLabel | string | "Favorites" | Title of the favorites group. |
| defaultFavoritesOpen | boolean | true | Whether the favorites group starts open. |
| active | string | Controlled active item id. Pair with onChange. | |
| defaultActive | string | first item | Initial active item id when uncontrolled. |
| onChange | (id: string) => void | Called when a navigation item or favorite is chosen. | |
| usage | { label: string; used: number; total: number; caption?: string } | null | sample usage | Usage card with a progress bar. The bar turns amber at 85 percent. Pass null to hide the card. |
| upgradeLabel | string | "Upgrade" | Text of the upgrade button. |
| onUpgrade | () => void | Called when the upgrade button is pressed. | |
| user | { name: string; email?: string; color?: string } | null | sample user | User row at the bottom. Pass null to hide it. |
| userMenu | { id: string; label: string; danger?: boolean }[] | Profile, Settings, Sign out | Entries of the menu that opens from the user row. |
| onUserMenuSelect | (id: string) => void | Called when a user menu entry is chosen. | |
| width | number | 260 | Sidebar width in pixels. |
| rowHeight | number | 32 | Height of navigation rows in pixels. The switcher and user row scale with it. |
| color | string | "#2f7bff" | Accent color for the progress bar, checkmark and focus rings. |