Skip to content

Transitions

Animate state changes in your components, from labels and selections to lists and pages.

Use these transitions for changing labels, selections, lists and views. You supply the appearance and accessible behavior. Each transition supports interruption, follows Speed and has a reduced-motion state. They also power @youj/react.

Sliding Indicator
A highlight that glides to the selected item of any group, found from the attributes the items already carry.
Morph Label
Content that crossfades between states while its box morphs to the new width.
Collapse
Height-auto disclosure that reverses from wherever it is.
Content Swap
A skeleton that resolves into the content it stood in for.
Presence List
List items and table rows that enter, leave and reorder without jumps.
Page Transition
Fade-through, slide, clip reveal and curtain for routes and views.

Where they're used

TransitionFor example, in @youj/react
Sliding IndicatorTabs, Toggle Group, Dropdown Menu, Command, Pagination, Navigation Menu, Sidebar
Morph LabelAsync Button, through Async Feedback
CollapseAlert dismissal, Field errors, Data tables, Tag Input, Timeline, Tree View
Content SwapData tables loading, Stat Card
Presence ListData tables rows, Notification Center, Prompt Input

For Base UI's own Collapsible, Accordion, popovers and dialogs, use the CSS Overlay presets instead. Composing components builds a full component from these.