A component for toggling between related panels on the same page.
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 Base UI. Everything else stays the same.
import { Tabs } from '@animate-ui/react/primitives/base-ui/tabs';
export function Settings() {
return (
<Tabs.Root defaultValue="account">
<Tabs.List>
<Tabs.Tab value="account">Account</Tabs.Tab>
<Tabs.Tab value="password">Password</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="account">Make changes to your account.</Tabs.Panel>
<Tabs.Panel value="password">Change your password.</Tabs.Panel>
</Tabs.Root>
);
}Using the @base-ui/react umbrella import instead? The barrel mirrors it: import { Tabs } from '@animate-ui/react/primitives/base-ui'.
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: Base UI moves focus with the arrow keys and selects with Enter or Space (or on focus with
activateOnFocus), and the indicator slides and the panels change. - Base UI keeps the outgoing panel mounted until its fade out is over, then removes it. With
keepMounted, inactive panels stay in the DOM,hidden, and fade in when they become active. - Rendering Base UI's own
Tabs.Indicatorturns the sliding indicator off: yours is used instead. <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 Base UI's Tabs. Animate UI adds the animation props below.
Root, Tab, Indicator
Base UI props only.
List
Base UI props, plus:
| Prop | Type | Default |
|---|---|---|
transition? | Transition | { type: 'spring', stiffness: 300, damping: 30 } |
Panel
Base 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] } |
The Panel renders through Base UI's render prop: a render of your own replaces the animated element.