Dock

Navigation

A floating icon bar with hover magnification and tooltips.

Dock renders a centered, blurred bar of icon buttons. Each button scales up on hover and shows a tooltip with its label.

npx shadcn@latest add dock

Default

Click an icon to select it.

Preview

Live

Home selected

tsx

1const [active, setActive] = useState("Home")
2
3const items = [
4  { icon: House, label: "Home", onClick: () => setActive("Home") },
5  { icon: Bell, label: "Activity", onClick: () => setActive("Activity") },
6  { icon: Settings, label: "Settings", onClick: () => setActive("Settings") },
7]
8
9<div className="flex h-48 items-end justify-center rounded-lg border p-6">
10  <Dock items={items} />
11</div>

No magnification

Disable the scale effect with magnification={false}.

Preview

Live

tsx

1<Dock
2  magnification={false}
3  items={[
4    { icon: House, label: "Home" },
5    { icon: Bell, label: "Activity" },
6  ]}
7/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
items	DockItem[]	Each item has an icon, a label, and an optional onClick.
magnification	boolean= true	Scales icons up on hover.
className	string	Override the classes of the dock bar.