Magnify Dock
betaA macOS-style dock whose icons grow, lift and show a label as the pointer or keyboard focus passes over them.
- Navigation
- 1 file
- 2 npm packages
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add magnify-docknpm packages installed: class-variance-authority, radix-ui.
import { MagnifyDock } from "@/components/ui/magnify-dock";Default
Gallery
Links
Controlled
With Disabled
Right To Left
<MagnifyDock>
| Prop | Type | Default |
|---|---|---|
items (required) | MagnifyDockItem[] | — |
defaultValueThe active item at first (uncontrolled). | string | — |
fill | "light" | "dark" | "light" |
liftHow far the lens item rises, 0–22 px. | number | 8 |
magnifyScale of the lens item, 1–2. | number | 1.32 |
onValueChangeCalled when an item is activated. | (value: string) => void | — |
reachHow many neighbours on each side are affected, 0–4. | number | 2 |
stroke1px inset hairline around the dock. | boolean | false |
valueThe active item (controlled). | string | — |
Plus every attribute of <div> except defaultValue, children.
A toolbar (role="toolbar", named "Dock" by default, aria-orientation horizontal) with one roving tab stop: ArrowLeft/ArrowRight move between items (mirrored in right-to-left layouts, wrapping), Home/End jump to the ends, and disabled items are skipped. Items are real buttons, or links when given an href, named by their label; icons and the tooltip pill are aria-hidden. The active item carries aria-current="page" rather than aria-pressed: the dock marks where you are, like a nav bar, and only one item is ever current, so it is not a set of toggles. Magnification and the tooltip follow keyboard focus as well as hover, so keyboard users get the same feedback. Under reduced motion items still magnify, without animating.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes