Dock
A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.
Examples
Apple style dock
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-dock.jsonComponent API
Dock
| Prop | Type | Default | Description |
|---|
| children | ReactNode | | The child elements to be animated. |
| className | string | undefined | Optional CSS class for styling the component. |
| spring | SpringOptions | { mass: 0.1, stiffness: 150, damping: 12 } | Spring options from motion for animation effects. |
| magnification | number | 80 | The scaling factor applied to a dock item on hover. |
| distance | number | 150 | The distance from the center of a dock item at which the magnification animation starts. |
| panelHeight | number | 64 | |
DockItem
| Prop | Type | Default | Description |
|---|
| children | ReactNode | | DockLabel and DockIcon |
| className | string | undefined | Optional CSS class for styling the component. |
| onClick | () => void | undefined | Optional click handler triggered when the item is clicked. |
DockLabel
| Prop | Type | Default | Description |
|---|
| children | ReactNode | | Content of the label, typically a string or formatted text. |
| className | string | undefined | Optional CSS class for styling the component. |
DockIcon
| Prop | Type | Default | Description |
|---|
| children | ReactNode | | Icon |
| className | string | undefined | Optional CSS class for styling the component. |
Credits
Created by @kashyap20, inspired by Build UI - Magnified Dock