Dock

A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.

Examples

npx motion-primitives@latest add 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

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.

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.

Prop	Type	Default	Description
children	ReactNode		Icon
className	string	undefined	Optional CSS class for styling the component.