# Fade Slide Tabs

> The Fade + Slide Tabs component elevates traditional tab navigation by animating the tab content with smooth fade and slide effects. When switching tabs, the previous content gently fades out while the new content slides in from the right, creating a polished and fluid user experience. Built using shadcn UI Tabs and Framer Motion, this component supports fully customizable labels, content panels, and default active tabs. Its responsive design works seamlessly across light and dark themes, making it ideal for dashboards, multi-view interfaces, and applications where smooth, visually engaging transitions enhance usability and user engagement.

- 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/fade-slide-tabs

## Install

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