Tabs organize content into multiple sections and allow users to navigate between them.
Overview
Analytics
Reports
Settings
Installation
Install the packages
Add the shadcn/ui component
Animate it
The CLI finds your shadcn/ui components through components.json, swaps their primitive imports for Animate UI's and removes the CSS animation classes Motion replaces.
Usage
Import from Animate UI instead of react-aria-components: it re-exports all of React Aria, with animated TabList, Tab and TabPanel. Everything else stays the same.
import {
Tab,
TabList,
TabPanel,
Tabs,
} from '@animate-ui/react/primitives/react-aria';
export function Settings() {
return (
<Tabs>
<TabList aria-label="Settings">
<Tab id="account">Account</Tab>
<Tab id="password">Password</Tab>
</TabList>
<TabPanel id="account">Make changes to your account.</TabPanel>
<TabPanel id="password">Change your password.</TabPanel>
</Tabs>
);
}Animation
- One indicator slides to the new tab on a spring (stiffness 300, damping 30). Clicking quickly or holding an arrow key retargets it from where it is, at the speed it has. It moves on the compositor (a Web Animation of its
translate, and of its size when the tabs' sizes differ), so the panels changing never hold it up. The TabList draws it as an indicator that copies the selected tab's own classes and data attributes, so it looks exactly like your selected tab (background, border, shadow, and thelinevariant's underline) in every style and theme, while the selected tab's own surface is hidden. Its focus ring stays on the tab. - The tabs' colors change over 200ms (
ease, the curve of a color change), whatever transition your tabs set. - The panels change one after the other, like Motion's
AnimatePresencewithmode="wait": the outgoing panel fades out into a 5px blur over 150ms on an ease-out, staying in the page and out of reach (inert); once it's gone, the incoming one fades in from the blur over 300ms while its height glides from the outgoing panel's to its own, over 450ms on Motion's layout curve (a gentle start, then a long deceleration, never past its size). If the panel's content changes size on the way (content loaded late, a nested animation settling), the height follows it from where it is and at the speed it has, on a spring that never goes past (stiffness 660, damping 52), instead of ending on a stale height and jumping. The panels share an element (the tabs root, usually), where one shows at a time. - A panel's box stays on screen. When the panels hold a box (shadcn's Card: the panel itself if it draws a border, a background or a shadow, else the first element down its chain of single children that does), only what's inside it fades: the next panel's box takes over at the same height in the same frame, then glides to its own height, clipping its content but never its own border or corners, so the border never blinks or gets cut. Boxes that don't look the same (border, radius, background, shadow), or that hold text right inside, fade whole. Content positioned against something outside what fades (a step's badge on its rail) fades without the blur, so it stays in place.
- The content slides by the tabs' order, like the menubar's and the navigation menu's content: going to a later tab, the leaving content slides 12px toward the start as it fades out and the next one comes in from 12px toward the end as it fades in (on the fades' own timings and curves), and the other way going back. Vertical tabs slide it vertically, right-to-left tabs mirror it. Only the content moves: inside a box (the Card), the box stays put and its content slides inside it, clipped by it; without one, the whole panel slides. Content coming in and turned back slides back out from where it is.
- Changing tabs again before that's over stays clean: a panel passed over before it showed never shows, one coming in fades back out from where it is, one picked again while it leaves comes back from there, and the height goes on from where it is. Two panels never show at once.
- Nothing animates on page load (nor a value restored before the page is painted).
- Keyboard changes animate like clicks: arrow keys slide the indicator and change the panels (with
keyboardActivation="manual", Enter selects). - React Aria keeps the outgoing panel mounted until its fade out is over, then removes it. With
shouldForceMount, inactive panels stay in the DOM andinert, as in React Aria, and fade in when they become selected. - The
className,styleandchildrenrender props keep working. The indicator and the panel go through React Aria'srenderprop; arenderof your own onTabListstill receives the indicator, onTabPanelit replaces the animation. <AnimateUIProvider tempo>paces every transition.- Under reduced motion, the indicator and the height jump; the panels still change one after the other, fading through their blur without sliding, the incoming one over 200ms.
API Reference
Every component takes exactly the props of React Aria's Tabs. Animate UI adds the animation props below.
Tabs, Tab
React Aria props only.
TabList
React Aria props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { type: 'spring', stiffness: 300, damping: 30 } |
TabPanel
React Aria props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { duration: 0.3, ease: [0.25, 0.1, 0.35, 1], height: { duration: 0.45, ease: [0.4, 0, 0.1, 1] } } |
exitTransition? | Transition | { duration: 0.15, ease: [0, 0, 0.58, 1] } |