Docs
Dock
Dock
An interactive icon dock that smoothly scales icons/images on hover, providing a responsive and engaging visual effect.
Installation
pnpm dlx shadcn@latest add to-setup
Usage
import { Dock, DockIcon } from "@/components/ui/dock";
<Dock>
<DockIcon
src="/images/components/dock/tailwindcss-logo.webp"
name="TailwindCSS"
href="#tailwindcss"
/>
<DockIcon
name="Edge"
src="/images/components/dock/edge-logo.webp"
href="#linear"
/>
<DockIcon
name="Motion"
src="/images/components/dock/motion-logo.webp"
href="#motion"
/>
...
</Dock>
Note
You can also pass icons as children if you don't want to use an image.
<Dock className="[&_svg]:size-6">
<DockIcon
name="Settings"
href="#setings"
>
<SettingsIcon>
</DockIcon>
...
</Dock>
Props
Dock
props.
Prop | Type | Description | Default |
---|---|---|---|
className | string | Additional custom classes for styling. | - |
children | React.ReactNode | Child elements to be rendered inside the Dock. | - |
maxAdditionalSize | number | Maximum additional size applied when hovering over icons. | 5 |
iconSize | number | Default size of the icons in pixels. | 55 |
DockIcon
props.
Prop | Type | Description | Default |
---|---|---|---|
className | string | Additional custom classes for styling. | - |
src | string | The source URL for the icon image. | - |
href | string | The link the icon should navigate to when clicked. | - |
name | string | The name of the icon, displayed as a tooltip on hover. | - |
handleIconHover | (e: React.MouseEvent<HTMLLIElement>) => void | Function to handle hover events on the icon. | - |
children | React.ReactNode | Alternative to src : allows passing custom JSX elements. | - |
iconSize | number | The size of the icon in pixels. | 55 |
Disclaimer
We are not affiliated with any of the brands whose logos are used in this component. These logos are displayed for demonstration purposes only.
Credits
For SVGs, I recommend using SVGL