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 motion-primitives@latest add dock
Component 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. |
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