A
Animlets
/
ui
Files
Code
Info
Animated tabs
animated-tabs
Tabs with a shared sliding indicator. Keyboard behavior comes from Radix Tabs.
Copy button
copy-button
Copies text to the clipboard and morphs the icon to a check or an error mark. The swap is instant when reduced motion is requested.
Fade in
fade-in
A Motion wrapper that fades its children in and skips that animation when the user prefers reduced motion.
Hold to confirm
hold-to-confirm
A destructive button that confirms after a press-and-hold, with a one-action alternative for people who cannot hold, and a countdown instead of a moving fill when reduced motion is requested.
Inline loader
inline-loader
Dots, a bar, or a spinner for an inline loading status. Reduced motion keeps the status text and drops the moving graphic.
Number ticker
number-ticker
A spring count for a KPI that keeps tabular figures, announces the final value once, and shows that value immediately when reduced motion is requested.
Stagger list
stagger-list
Staggers the entrance of cards or rows with opacity and transform so the list keeps its layout, and skips the stagger when reduced motion is requested.
Success check
success-check
Draws a checkmark for a saved form or a finished step and exposes the confirmation as a status message.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Animated tabs
animated-tabs
Tabs with a shared sliding indicator. Keyboard behavior comes from Radix Tabs.
Copy button
copy-button
Copies text to the clipboard and morphs the icon to a check or an error mark. The swap is instant when reduced motion is requested.
Fade in
fade-in
A Motion wrapper that fades its children in and skips that animation when the user prefers reduced motion.
Hold to confirm
hold-to-confirm
A destructive button that confirms after a press-and-hold, with a one-action alternative for people who cannot hold, and a countdown instead of a moving fill when reduced motion is requested.
Inline loader
inline-loader
Dots, a bar, or a spinner for an inline loading status. Reduced motion keeps the status text and drops the moving graphic.
Number ticker
number-ticker
A spring count for a KPI that keeps tabular figures, announces the final value once, and shows that value immediately when reduced motion is requested.
Stagger list
stagger-list
Staggers the entrance of cards or rows with opacity and transform so the list keeps its layout, and skips the stagger when reduced motion is requested.
Success check
success-check
Draws a checkmark for a saved form or a finished step and exposes the confirmation as a status message.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information