Installation
npx shadcn@latest add "https://magicui.design/r/dock"Examples
Custom Direction
Custom magnification
Props
Dock
| Prop | Type | Description | Default |
|---|---|---|---|
| className | string | Custom CSS class for styling | - |
| children | ReactNode | Children elements | - |
| iconSize | number | Size of the icon | 40 |
| iconMagnification | number | Level of icon magnification | 60 |
| iconDistance | number | Distance from cursor to magnify icon | 140 |
| direction | string | Direction of the dock | "middle" |
DockIcon
| Prop | Type | Description | Default |
|---|---|---|---|
| size | number | Size of the icon | 40 |
| magnification | number | Level of icon magnification | 60 |
| distance | number | Distance from cursor to magnify icon | 140 |
| 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