127 Components
Elastic Dock
NavigationPhysics-coupled magnification dock with continuous Euclidean pointer falloff, spring-tethered icon scaling, and roving keyboard navigation.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/elastic-dock.json"
Props
TypeScript props supported by <ElasticDock />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ElasticDockItem[] | — | Array of dock items containing id, label, icon node, optional badge, and click handler. |
| baseSize | number | 46 | Resting icon button width and height in pixels. |
| magnifiedSize | number | 68 | Peak magnified button dimension in pixels at zero pointer distance. |
| distance | number | 140 | Pointer proximity radius in pixels within which neighboring icons scale. |
| stiffness | number | 320 | Hooke's Law spring stiffness coefficient for magnification interpolation. |
| damping | number | 22 | Spring damping coefficient controlling oscillation settling. |
| defaultActiveId | string | — | Identifier of the initially active dock item |
| onSelect | (item: ElasticDockItem) => void | — | Callback fired when a dock icon is selected |
Key Features
- Continuous Euclidean pointer distance interpolation with zero React re-renders during mouse movement.
- Shared layoutId active indicator dot and floating HUD tooltips.
- Full WAI-ARIA toolbar semantics with ArrowLeft, ArrowRight, Home, and End keyboard navigation.
Keyboard & Accessibility
- Implements role='toolbar' with roving arrow-key focus management across all dock items.
- Disables continuous magnification and vertical lift when prefers-reduced-motion is active.
- Provides aria-label and aria-current='page' state announcements for screen readers.