Components
Dock
macOS-style magnification: icons swell as the pointer passes over, neighbours rising along a curve.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Dock } from '@vizzele/react';
<Dock
items={[
{ label: 'Home', icon: <HomeIcon />, href: '/', active: true },
{ label: 'Search', icon: <SearchIcon />, onClick: openSearch },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | DockItem[] | — | { label, icon, href? | onClick?, active? } |
size | number | 48 | Resting size (px). |
magnification | number | 1.75 | Peak scale. |
distance | number | 150 | How far the swell spreads (px). |
Accessibility
- Each item is a link or button with an accessible name; keyboard focus magnifies it too.
- Touch: magnifies while you drag your finger along it.