BadtzUIBeta
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.

PropTypeDescriptionDefault
classNamestringAdditional custom classes for styling.-
childrenReact.ReactNodeChild elements to be rendered inside the Dock.-
maxAdditionalSizenumberMaximum additional size applied when hovering over icons.5
iconSizenumberDefault size of the icons in pixels.55

DockIcon props.

PropTypeDescriptionDefault
classNamestringAdditional custom classes for styling.-
srcstringThe source URL for the icon image.-
hrefstringThe link the icon should navigate to when clicked.-
namestringThe name of the icon, displayed as a tooltip on hover.-
handleIconHover(e: React.MouseEvent<HTMLLIElement>) => voidFunction to handle hover events on the icon.-
childrenReact.ReactNodeAlternative to src: allows passing custom JSX elements.-
iconSizenumberThe 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

  • Cloud OrbitExpandable Card