# NestedTabs

> The Nested Tabs (Multi-Level Tabs) component introduces a structured way to organize complex content within your application. Unlike traditional flat tabs, it supports hierarchical navigation where each main tab can reveal its own set of sub-tabs, allowing users to dive deeper into related sections without overwhelming the interface. Smooth animations ensure that transitions between parent and child tabs feel natural and engaging. This makes it ideal for dashboards, documentation portals, and settings panels, where users often need to navigate across multiple categories and subcategories. With built-in support for both light and dark themes, the component adapts seamlessly to modern UI designs while keeping content neatly organized and highly accessible.

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

## Install

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