Magnetic Dock
A bottom dock whose icons grow under the pointer.
Features
- A dock fixed to the bottom of the screen
- Icons grow under the pointer like macOS
- Tooltips name each item
- Touch friendly
Best for: Portfolios and playful sites that want a macOS feel.
Installation
npm install motion lucide-react clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | NavItem[] | - | Links: label, href, optional icon and children. |
| baseSize | number | 44 | Icon size at rest, in px. |
| magnification | number | 68 | Icon size right under the pointer, in px. |
| className | string | - | Extra classes for the outer element. |
FAQ
Is the Magnetic Dock navbar free to use?
Yes. Magnetic Dock is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Magnetic Dock work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Magnetic Dock in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Magnetic Dock need installed?
motion, lucide-react, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Magnetic Dock accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.