Installation
npx shadcn@latest add "https://magicui.design/r/dock"Examples
Custom Direction
Custom magnification
Props
Dock
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Custom CSS class for styling |
children | ReactNode | - | Children elements |
iconSize | number | 40 | Size of the icon |
iconMagnification | number | 60 | Level of icon magnification |
iconDistance | number | 140 | Distance from cursor to magnify icon |
direction | string | "middle" | Direction of the dock |
DockIcon
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 40 | Size of the icon |
magnification | number | 60 | Level of icon magnification |
distance | number | 140 | Distance from cursor to magnify icon |
mouseX | any | - | Mouse X position for magnification |
className | string | - | Custom CSS class for styling |
children | React.ReactNode | - | Children elements |
props | PropsWithChildren | - | Additional props |
Credits
- Credits to Build UI for this fantastic component
- Credits to Ritesh Bucha for finding and improving it