# Magnetic Dock

> This Magnetic Dock component is a modern, interactive navigation dock designed with shadcn/ui, Framer Motion, and Lucide icons. It provides a smooth, playful magnetic effect, where nearby icons subtly shift as you hover, creating an elastic, physics-based interaction. The dock has a glassmorphic card background with blur and soft borders, making it look sleek in both light and dark themes. It is responsive to placement, allowing you to pin it to the bottom, top, or left of the screen, and it remains fixed even while scrolling. With its balance of clean spacing, elegant hover animations, and theme adaptability, this component feels futuristic yet professional, perfect for modern web dashboards or application layouts.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/magnetic-dock

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/magnetic-dock?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt