# Hybrid Tabs

> The Icon + Label Hybrid Tabs component combines compactness with clarity by showing only icons for inactive tabs and expanding the active tab to reveal both the icon and its label. This approach saves horizontal space while still giving users descriptive context when they need it. Smooth transitions powered by Framer Motion make the tab expansion feel natural and engaging, while shadcn UI ensures a clean, accessible base structure. With its modern, space-efficient design, this component is especially useful for dashboards, mobile-friendly interfaces, or any application where both clarity and compactness matter.

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

## Install

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