A dock across the top of an app whose tiles swell toward the pointer and bounce when pressed. Folder items open a stack that fans out in an arc of cards, which turns into a plain list sheet on phones.
npx shadcn@latest add https://hyperblur.dev/r/navbar-dock-stacks.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/navbar-dock-stacks.tsx.
import { NavbarDockStacks } from "@/components/hyperblur/navbar-dock-stacks"
<NavbarDockStacks items={items} showBackdrop={false} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Atelier" | Name on the left. Hidden on phones so the dock can center. |
| items | NavbarDockStacksItem[] | Home, Projects, Library, Inbox, Calendar, Search, Settings | Dock tiles. Built-in icons: home, projects, library, inbox, calendar, search, settings, chart. A stack makes the tile open a fan of cards; divider adds a separator before it. |
| active | number | Controlled index of the current page. Pair with onActiveChange. | |
| defaultActive | number | 0 | Current page when uncontrolled. It shows a running light. |
| onActiveChange | (index: number) => void | Called when a regular tile is chosen. | |
| defaultOpenStack | number | null | null | Index of the stack that starts open. |
| onStackOpenChange | (index: number | null) => void | Called when a stack opens or closes. | |
| magnify | number | 0.55 | How much the tile under the pointer grows. 0 turns magnification off. |
| accent | string | "#60a5fa" | Running light, stack footer link and focus rings. |
| showBackdrop | boolean | true | Render sample page content behind the navbar for previews. Turn it off in a real layout. |