127 Components
Animated Tabs
NavigationSmooth shared-element sliding pill tabs with animated panel transitions, optional badge counters, and keyboard arrow navigation.
Shared-Element Sliding Indicator
The active pill glides smoothly between tabs using Framer Motion layoutId springs with zero layout shift.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/animated-tabs.json"
Props
TypeScript props supported by <AnimatedTabs />.
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | TabItem[] | — | Array of tab items containing id, label, optional badge, and content. |
| defaultTabId | string | — | ID of the tab selected on initial render. |
| onChange | (tabId: string) => void | — | Callback fired when the user switches tabs. |
Key Features
- Shared-element active pill indicator powered by Framer Motion layoutId.
- Crossfades tab panel content smoothly on selection change.
- Supports badge counts and Left/Right arrow keyboard navigation.
Keyboard & Accessibility
- Implements WAI-ARIA role='tablist', role='tab', and role='tabpanel'.
- Supports Left and Right arrow keys to switch between tabs.
- Respects prefers-reduced-motion automatically.