# ZoomDepthTabs

> The Zoom + Depth Tabs component gives a modern, interactive feel to tab navigation by introducing subtle 3D-inspired animations. When a tab becomes active, it slightly zooms in and brightens, while inactive tabs tilt back and fade, creating the illusion of depth on the interface. This effect makes switching between sections feel more dynamic and engaging compared to standard flat tab bars. It works especially well for creative dashboards, analytics pages, or modern applications where user experience and aesthetics are equally important. By supporting props for labels, content, and default values, the component is flexible enough to adapt to different use cases while maintaining a sleek, professional style.

- 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/zoom-depth-tabs

## Install

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