# Stretch Tabs

> Stretch tabs for React and Tailwind CSS (shadcn/ui) that move the active indicator with a squash-and-stretch motion: it first grows to cover both the old and the new tab, then snaps to the target width. It is built to make the direction of a tab change readable at a glance, even on a dense settings bar. Stretch tabs are a tabs component whose indicator animates its offset and width through an intermediate union keyframe; this one measures the tabs with offsetLeft and offsetWidth, animates with the Web Animations API, exposes the travel direction, and slides or fades the panel the same way. Ships underline, pill and segmented-control variants, icons and count badges, controlled and uncontrolled value, a stretch amount from 0 to 1, duration, arrow key, Home and End navigation with roving tabindex, full ARIA tabs semantics, re-measuring on resize, and a reduced motion fallback. Use it for settings pages, dashboards, date range pickers and filter bars. The included demo cycles three tab sets and makes no requests. Requires React only, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Tabs, Navigation, Animation, Segmented Control, shadcn/ui
- Live preview: https://21st.dev/@dhxwhy/components/stretch-tabs

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/stretch-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 · More like this: https://21st.dev/community/components/s/tabs.md