A vertical icon dock pinned to the side of an app. Icons swell as the pointer passes over them, a slow wave runs through the dock while idle, and tooltips, badges and an active indicator sit beside each icon.
npx shadcn@latest add https://hyperblur.dev/r/nav-side-dock.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-side-dock.tsx.
import { NavSideDock } from "@/components/hyperblur/nav-side-dock"
<NavSideDock showBackdrop={false} magnification={1.8} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | NavSideDockItem[] | Home, Search, Inbox, Calendar, Files, Insights, Team, New board, Settings | Items with label, icon (home, search, inbox, calendar, folder, chart, layers, users, settings, plus), optional href, badge and separator to draw a divider before the item. |
| active | number | Controlled active index. Pair with onActiveChange. | |
| defaultActive | number | 0 | Active index when uncontrolled. |
| onActiveChange | (index: number, item: NavSideDockItem) => void | Called when an item is clicked. | |
| magnification | number | 1.7 | Scale of the icon right under the pointer. |
| range | number | 150 | Distance in pixels over which neighbours grow. |
| idle | boolean | true | Run a gentle magnify wave through the dock while the pointer is away. Off under reduced motion. |
| side | "left" | "right" | "left" | Which edge the dock sits on. Tooltips and the indicator flip to match. |
| user | { name: string } | null | { name: "Rafael Costa" } | Account avatar at the bottom. Pass null to hide it. |
| accent | string | "#8b5cf6" | Color of the active item, indicator and focus ring. |
| showBackdrop | boolean | true | Render a faded canvas app next to the dock for previews. Turn it off in a real layout. |