# Sliding Tabs

> The Sliding Glow Tabs component is a modern reimagining of the classic tab navigation pattern. Instead of a static underline, it features a glowing gradient bar that smoothly slides beneath the active tab, creating a sense of motion and energy. Built with shadcn UI and Framer Motion, it feels futuristic yet minimal, balancing aesthetics with usability. The glowing indicator not only highlights the current selection but also enhances user feedback with fluid transitions. Its design adapts easily across light and dark themes, making it versatile for dashboards, content sections, or app navigation. By passing props, developers can customize the number of tabs, their labels, and the content panels, ensuring the component is flexible enough for a wide range of use cases while still maintaining a sleek, engaging look.

- 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/sliding-tabs

## Install

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