FloatingDock

A macOS-inspired floating dock with icons that magnify as the pointer approaches and reveal a tooltip for each item. Great for portfolios, editors, and app shells.

Interactive Demo

Move your cursor across the dock to see the icons scale and labels appear.

Usage

import { FloatingDock } from "@mantleui/react/motion";
import { Home, Search, Mail, Bell, Settings, User } from "lucide-react";

const items = [
  { icon: <Home size={22} />, label: "Home", onClick: () => {} },
  { icon: <Search size={22} />, label: "Search", onClick: () => {} },
  { icon: <Mail size={22} />, label: "Mail", onClick: () => {} },
  { icon: <Bell size={22} />, label: "Notifications", onClick: () => {} },
  { icon: <Settings size={22} />, label: "Settings", onClick: () => {} },
  { icon: <User size={22} />, label: "Profile", href: "/profile" },
];

<FloatingDock items={items} />

FloatingDock props

Prop	Type	Default	Description
`items`	`FloatingDockItem[]`	—	Dock items. Each item has `{ icon, label, onClick?, href? }`.

items

FloatingDockItem[]

Dock items. Each item has `{ icon, label, onClick?, href? }`.

FloatingDockItem shape

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Icon content (typically an SVG).
`label`	`string`	—	Accessible label shown in the tooltip.
`onClick`	`() => void`	—	Optional click handler.
`href`	`string`	—	Optional anchor href — the item renders as an `<a>`.

icon

ReactNode

Icon content (typically an SVG).

label

string

Accessible label shown in the tooltip.

onClick

() => void

Optional click handler.

href

string

Optional anchor href — the item renders as an `<a>`.