# Magnetic Tabs

> The Magnetic Tabs component is a dynamic, interactive tab system designed for modern UIs. It features a magnetic indicator that smoothly “snaps” toward the hovered or active tab, giving a playful, physics-based feel. The indicator is larger than the tab buttons and can be customized with indicatorPadding to create a prominent, glowing effect. Each tab displays its corresponding content with smooth transitions, making the interface feel fluid and responsive. The component is fully responsive, supports light and dark themes, and can be centered on the page or embedded within layouts, offering a visually engaging and tactile tab navigation experience.

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

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/magnetic-tabs?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