Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/magnetic-dockimport MagneticDock from "@/components/ui/magnetic-dock";
export default function DemoOne() {
return <MagneticDock />;
}