The MagneticDock provides a premium navigation experience inspired by desktop operating systems. Icons expand and "lean" towards the user's cursor based on proximity using high-performance physics.
Preview
Apps
Explore
Assistant
Chat
Files
Settings
Usage
Installation
$ pnpm dlx shadcn add https://klarden.vercel.app/r/magnetic-dock.json
Custom Items
import { MagneticDock } from "@/components/magnetic-dock";
import { Home, Search, Settings } from "lucide-react";
const items = [
{ icon: Home, label: "Home", onClick: () => console.log("home") },
{ icon: Search, label: "Search" },
{ icon: Settings, label: "Settings" },
];
export default function App() {
return <MagneticDock items={items} magnification={80} distance={140} />;
}
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
items | DockItem[] | defaultItems | Array of items with icons and labels. |
magnification | number | 80 | Maximum size of the icon when centered. |
distance | number | 140 | The range of the magnetic effect in pixels. |
className | string | — | Additional CSS classes for the dock. |