Magnify Dock
A toolbar of icon tiles that swell toward the pointer, with a label above the nearest one and keyboard magnify.
Overview
Tiles grow with a cosine falloff around the pointer, so the nearest one peaks and its neighbours lean in. Sizes are worked out from the resting layout, so the swell never chases itself.
With the keyboard it is one toolbar: arrow keys move focus and the focused tile magnifies the same way. The selected tile turns solid and gets a dot underneath.
When to use
- App launchers, playful site navs and creative tools with a handful of destinations.
- Floating toolbars on canvases.
When not to use
- Touch-first layouts: there is no hover to magnify. Use a tab bar.
- More than about eight items, or items without clear icons.
Installation
pnpm dlx shadcn@latest add https://sundaeui.dev/r/magnify-dock.jsonnpx shadcn@latest add https://sundaeui.dev/r/magnify-dock.jsonyarn dlx shadcn@latest add https://sundaeui.dev/r/magnify-dock.jsonbunx --bun shadcn@latest add https://sundaeui.dev/r/magnify-dock.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy magnify-dock.tsx and magnify-dock.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { MagnifyDock } from '@/components/sundae/magnify-dock'
<MagnifyDock
items={[{ id: 'home', label: 'Home', icon: <HomeIcon /> }, { id: 'search', label: 'Search', icon: <SearchIcon /> }]}
onValueChange={navigate}
/>Props
| Prop | Type | Default |
|---|---|---|
items*id, label and a 20px stroke icon per tile. | DockItem[] | — |
magnificationPeak scale of the nearest tile. | number | 1.6 |
reachPixels the swell spreads over. | number | 90 |
value / defaultValueSelected item id. | string | — |
onValueChangeCalled on select. | (id: string) => void | — |
labelsShow the label above the nearest tile. | 'hover' | 'never' | 'hover' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- role="toolbar" with roving focus; each tile is a labelled toggle button (aria-pressed for the selected one).
- Labels are visible on hover and focus, and always available as the accessible name.
- Reduced motion turns the swell off; the focused tile only grows slightly, without animation.
Customization
- --tile and --tile-fg colour the tiles.
- Change BASE in the source for bigger resting tiles.
Keyboard
- Tab
- Focus the dock (selected tile)
- ← / →
- Move between tiles
- Home / End
- First or last tile
- Enter / Space
- Select a tile
FAQ
- Does it work on touch?
- It works, but there is nothing to magnify: touches select directly. The swell only follows a mouse.
- Why does the dock get wider?
- Tiles grow in place instead of overlapping, like the macOS dock. Leave about 40% extra room around it.
- Is Magnify Dock free?
- Magnify Dock is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Magnify Dock?
- Run npx shadcn@latest add https://sundaeui.dev/r/magnify-dock.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Magnify Dock support keyboard and screen readers?
- role="toolbar" with roving focus; each tile is a labelled toggle button (aria-pressed for the selected one). Labels are visible on hover and focus, and always available as the accessible name.
- Does Magnify Dock respect reduced motion?
- Reduced motion turns the swell off; the focused tile only grows slightly, without animation.
More like this
All navigation →Orbit Nav
Navigation · PlayfulTaffy Tabs
Navigation · PlayfulToolbar Tooltips
Navigation · RefinedPagination
Navigation · RefinedUnderline Tabs
Navigation · RefinedBreadcrumbs
Navigation · Refined