Dock

Pro

A dock whose icons swell as the pointer passes over them, with a label above each one.

Move the pointer along the dock

Customize

Magnify1.7×

Reach140px

Icon size48px

Installation

Dock is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy dock.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { Dock } from "@/components/ui/dock";

<Dock
  items={[
    { icon: <HomeIcon />, label: "Home", onClick: goHome },
    { icon: <SearchIcon />, label: "Search", onClick: openSearch },
  ]}
  magnification={1.7}
/>

Props

6 properties

Property	Type	Default	Description
items	{ icon: ReactNode; label: string; onClick?: () => void }[]	—	Dock entries. The label is shown on hover and used as the button name.
magnification	number	1.7	How large the icon under the pointer grows, as a multiple of baseSize.
distance	number	140	How far from the pointer icons still grow, in pixels.
baseSize	number	48	Icon size at rest, in pixels.
label	string	"Dock"	Accessible name of the dock.
className	string	—	Extra classes for the dock.

Dependencies: motion