# Drag And Drop Tabs

> This Drag-and-Drop Tabs component allows users to reorder tabs interactively by dragging them, providing a highly flexible and customizable interface for dashboards or productivity apps. The active tab is clearly highlighted with distinct light and dark theme support, ensuring users always know which tab is selected. During dragging, tabs display a subtle opacity change and an accent ring, giving a tactile, responsive feel. Clicking on a tab immediately displays its associated content, while the smooth animations and elastic snapping make rearranging tabs intuitive and visually appealing. This component combines usability, interactivity, and modern UI aesthetics, making it ideal for dynamic multi-tab interfaces.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities
- Live preview: https://21st.dev/@ruixen.ui/components/drag-and-drop-tabs

## Install

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