A set of layered sections of content, known as tab panels, that are displayed one at a time.
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 the primitive from Animate UI instead of Radix UI. Everything else stays the same.
import { Tabs } from '@animate-ui/react/primitives/radix-ui';
export function Settings() {
return (
<Tabs.Root defaultValue="account">
<Tabs.List aria-label="Settings">
<Tabs.Trigger value="account">Account</Tabs.Trigger>
<Tabs.Trigger value="password">Password</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="account">Make changes to your account.</Tabs.Content>
<Tabs.Content value="password">Change your password.</Tabs.Content>
</Tabs.Root>
);
}Coming from the @radix-ui/react-tabs package? Use the subpath: import * as TabsPrimitive from '@animate-ui/react/primitives/radix-ui/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 List draws it as an indicator that copies the active tab's own classes and data attributes, so it looks exactly like your active tab (background, border, shadow, and thelinevariant's underline) in every style and theme, while the active 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, Home and End slide the indicator and change the panels; focus moves at once.
- Radix unmounts an unselected panel at once: the outgoing one is kept mounted (
forceMount) while it fades out. With your ownforceMount, inactive panels stay in the DOM,hidden, and fade in when they become active. <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 part takes exactly the props of Radix UI's Tabs. Animate UI adds the animation props below.
Root, Trigger
Radix UI props only.
List
Radix UI props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { type: 'spring', stiffness: 300, damping: 30 } |
Content
Radix UI 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] } |