An app sidebar you resize by dragging its edge, with a live width readout that snaps it into an icon rail below a threshold. Collapsed, every item shows a tooltip with its label and shortcut.
Inbox
drag the edge4 unread threads
npx shadcn@latest add https://hyperblur.dev/r/sidebar-resizable.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-resizable.tsx.
import { SidebarResizable } from "@/components/hyperblur/sidebar-resizable"
<SidebarResizable defaultWidth={232} onWidthChange={(w) => localStorage.setItem("sidebar", String(w))} />| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { label?: string; items: { id: string; label: string; icon?: SidebarResizableIconName | ReactNode; shortcut?: string; badge?: number }[] }[] | Workspace and Insights groups | Item groups. A group label turns into a short divider when collapsed. A badge shows a count expanded and a red dot collapsed. |
| active | string | Controlled active item id. Pair with onChange. | |
| defaultActive | string | first item | Initially active id when uncontrolled. |
| onChange | (id: string) => void | Called when an item is chosen. | |
| width | number | Controlled width in pixels. A value at or below collapsedWidth renders the rail. | |
| defaultWidth | number | 224 | Initial width when uncontrolled. |
| onWidthChange | (width: number) => void | Called after a drag, a keyboard resize or the collapse button. | |
| minWidth | number | 176 | Narrowest expanded width. |
| maxWidth | number | 320 | Widest width the handle allows. |
| collapsedWidth | number | 60 | Width of the icon rail. |
| snapAt | number | 128 | Dragging below this width snaps the sidebar into the rail on release. |
| itemHeight | number | 34 | Height of each item row in pixels. |
| brand | string | "Linework" | Workspace name in the header. Its first letter becomes the mark. |
| footer | ReactNode | Extra content above the collapse button. | |
| accent | string | "#2f7bff" | Accent for the mark, active row, drag handle and focus rings. |