Floating Dock
A macOS-style floating dock with magnification effect on hover.
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" },
]}
/>Props
| Prop | Type | Default |
|---|---|---|
items | DockItem[] | - |
magnification | number | 60 |
distance | number | 140 |
itemsType:
DockItem[]Default: -magnificationType:
numberDefault: 60distanceType:
numberDefault: 140