A
Animlets/ui
Animated tabsanimated-tabsTabs with a shared sliding indicator. Keyboard behavior comes from Radix Tabs.
Copy buttoncopy-buttonCopies 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 infade-inA Motion wrapper that fades its children in and skips that animation when the user prefers reduced motion.
Hold to confirmhold-to-confirmA 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 loaderinline-loaderDots, a bar, or a spinner for an inline loading status. Reduced motion keeps the status text and drops the moving graphic.
Number tickernumber-tickerA 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 liststagger-listStaggers 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 checksuccess-checkDraws 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 tabsanimated-tabsTabs with a shared sliding indicator. Keyboard behavior comes from Radix Tabs.
Copy buttoncopy-buttonCopies 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 infade-inA Motion wrapper that fades its children in and skips that animation when the user prefers reduced motion.
Hold to confirmhold-to-confirmA 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 loaderinline-loaderDots, a bar, or a spinner for an inline loading status. Reduced motion keeps the status text and drops the moving graphic.
Number tickernumber-tickerA 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 liststagger-listStaggers 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 checksuccess-checkDraws 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
8 items
GitHubRB@rbadillap