A frosted, rounded sidebar inset from the page edge with labeled groups, an active pill that glides between items and a user card with a live status dot.
Tuesday, Nov 4
Good morning
Open
12
Done
38
npx shadcn@latest add https://hyperblur.dev/r/sidebar-floating.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-floating.tsx.
import { SidebarFloating } from "@/components/hyperblur/sidebar-floating"
<div style={{ height: 520 }}><SidebarFloating onChange={(id) => console.log(id)} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { label?: string; items: { id: string; label: string; icon?: ReactNode; badge?: string | number; href?: string }[] }[] | sample groups | Navigation groups. Items render as links when `href` is set and as buttons otherwise. The label letter stands in when `icon` is missing. |
| 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 an item is chosen. | |
| brand | ReactNode | Content shown above the navigation, such as a logo and product name. | |
| user | { name: string; role?: string; color?: string; status?: "online" | "away" | "offline" } | null | sample user | User card at the bottom. Initials and avatar color come from the name unless `color` is given. Pass null to hide the card. |
| onUserClick | () => void | Called when the user card is pressed. | |
| width | number | 248 | Total width in pixels, including the inset. |
| inset | number | 12 | Gap in pixels between the container edge and the glass panel. |
| rowHeight | number | 36 | Height of each navigation row in pixels. |
| color | string | "#2f7bff" | Accent color for the active pill, badges and focus rings. |