ComponentsProNew
Dock
A bar of icons that grow under the cursor. A click makes an icon bounce and lights a dot under it, and the divider can be dragged.
Customize
accentColor
glowColor
highlightColor
Based on Dock (MIT license) ยท Terms of use
Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| Dock.children | ReactNode | โ | DockCard items and DockDivider separators. |
| DockCard.id | string | โ | Card number as a string, used by the animations. |
| DockCardInner.src | string | โ | Icon image. |
| DockCardInner.children | ReactNode | โ | What to show instead of the image after a click. |
| accentColor | string | "#ffffff" | Main colour: the dot under a running icon and the ring of the active icon. |
| glowColor | string | "rgba(255,255,255,0.12)" | Soft glow under the dock and around the active icon. |
| highlightColor | string | "rgba(255,255,255,0.08)" | Thin light rim along the top edge of the dock. |
| className | string | โ | Extra classes. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge