Dock

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

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

Examples

npx shadcn@latest add "https://components.dylanwlim.com/c/dock.json"

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.

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.