# Capsule Tabs

> This Scrollable Capsule Tabs component is designed to handle a large number of tabs elegantly. It displays a limited number of tabs at a time (visibleCount) and allows users to navigate through them using left/right arrows or pagination dots. The active tab is highlighted, and its corresponding content is displayed below. This layout is ideal for dashboards, analytics menus, or any interface where space is limited but many options need to be accessible. The smooth hover effects, pill-shaped tabs, and responsive design make it visually appealing and user-friendly.

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

## Install

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