Floating Dock
A macOS-style floating dock with smooth magnification, animated tooltips, and vertical/horizontal layout support.
npx arupui add floating-dock
Preview
Usage
floating-dock.tsx
import { FloatingDock } from "@/components/blocks/floating-dock"
<FloatingDock
items={[
{ icon: <HomeIcon />, label: "Home", href: "/" },
{ icon: <DocsIcon />, label: "Docs", href: "/docs" },
]}
direction="horizontal"
/>Props
| Prop | Type | Default |
|---|---|---|
items | DockItem[] | - |
magnification | number | 64 |
distance | number | 140 |
direction | "horizontal" | "vertical" | "horizontal" |
itemsType:
DockItem[]Default: -magnificationType:
numberDefault: 64distanceType:
numberDefault: 140directionType:
"horizontal" | "vertical"Default: "horizontal"