Dock
navigationmacOS-style magnifying dock with icon zoom effect on hover.
Preview
No preview available
Check the code examples below.
Installation
npm install @launchapp/design-systemImport
import { Dock, DockIcon } from "@launchapp/design-system";Examples
Bottom dock
<Dock> <DockIcon><span className="text-2xl">🏠</span></DockIcon> <DockIcon><span className="text-2xl">📁</span></DockIcon> <DockIcon><span className="text-2xl">⚙️</span></DockIcon></Dock>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | DockIcon items. |
direction | "top" | "bottom" | "left" | "right" | "bottom" | Dock position. |
magnification | number | 60 | Maximum icon size at hover peak. |