A narrow icon rail that expands on hover or focus into a labeled sidebar floating over the content, with a sliding active indicator.
November
4 events this week
npx shadcn@latest add https://hyperblur.dev/r/sidebar-icon-labels.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-icon-labels.tsx.
import { SidebarIconLabels } from "@/components/hyperblur/sidebar-icon-labels"
<SidebarIconLabels defaultActive="calendar" onChange={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | { id: string; label: string; icon?: SidebarIconLabelsIconName | ReactNode; badge?: number }[] | Home, Calendar, Messages, Files, Reports, Settings | Rail items. A badge shows a dot while collapsed and a count while expanded. |
| 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. | |
| open | boolean | Controlled expanded state. When set, hover and focus no longer expand the rail. | |
| onOpenChange | (open: boolean) => void | Called whenever the rail expands or collapses. | |
| expandOnHover | boolean | true | Expand when the pointer enters. Keyboard focus always expands it. |
| peek | number | 0 | Milliseconds between automatic open and close peeks while nobody is interacting. 0 turns the peek off. |
| brand | ReactNode | Logo area above the items. | |
| footer | ReactNode | Content pinned to the bottom, such as an avatar. | |
| collapsedWidth | number | 56 | Width of the rail in pixels. This is the space reserved in the layout. |
| expandedWidth | number | 184 | Width of the floating panel when expanded. |
| itemHeight | number | 40 | Height of each item in pixels. |
| accent | string | "#2f7bff" | Accent for the active indicator and focus rings. |