What is a micro-interaction?

A small animated response to one action, such as a badge popping when a count changes or a check drawing when a save completes.

Do transitions work with Next.js page routing?

Yes. Page Transition wraps your route content, and the rest are local to the component that changes state.

Which transitions are free?

A couple of everyday ones are free and MIT; the rest are part of Pro, and every one can be tried live first.

Do these UI transitions and micro-interactions work with shadcn/ui?

Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.

React UI Transitions and Micro-interactions

React UI transitions: badges that pop, labels that swap, pages that push.

About these UI transitions and micro-interactions

Transitions handle the moments between states: a notification badge that pops, a label that swaps, an icon that morphs, an error that shakes, a card that resizes and a page that slides in from the right direction.

They are short enough never to block what someone wants to do, and the change they animate is also announced to assistive tech.

Where they earn their keep

Buttons that change state.
Counters and notification badges.
Route and page changes.
Form validation and errors.

How they are built

Transitions use AnimatePresence and layout animation, so entering and leaving elements are handled for you. Durations are tuned to feel instant, and reduced motion swaps movement for a fade.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 23 UI transitions and micro-interactions

2 are free and MIT licensed, and 21 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

Card Resize (Pro): A React box that springs to the size of its content
Notification Badge (Pro): A React notification badge that pops in and slides new counts in
Text Swap: A React text swap: labels change with a rise and blur as the width eases
Icon Swap: A React icon swap: copy to check, play to pause, with a blur crossfade
Page Transition (Pro): React page transitions: native-feeling push and pop between views
Error Shake (Pro): A React error shake: a decaying head shake for wrong input
Arrow Link (Pro): A React arrow link whose chevron grows a stem on hover, CSS only
Number Pop (Pro): React number pop: only the digits that changed pop in from a blur
Spinner Check (Pro): A React spinner that closes into a ring and draws a check or cross
Banner Stack (Pro): React banner stack: banners stack like a deck and fan out on hover
Thinking States (Pro): React AI thinking states: the current step shimmers and the next rises in
Streaming Text (Pro): React streaming text: model output resolves word by word through a blur
Dot Matrix (Pro): A React dot matrix loader with wave, spiral, pulse and rain patterns
Clear Input (Pro): A React search field whose clear button dissolves the text word by word
Morph Menu (Pro): A React morph menu: a button stretches into its own menu and back
Reasoning Stream (Pro): React AI reasoning stream: a two-line window that collapses to a summary
Orbit Text (Pro): React orbit text: washes of colour circle through the letters, CSS only
Organic Shimmer (Pro): A React organic shimmer that ripples like heat haze with a glowing edge
Pro Button (Pro): A React upgrade button with an orbiting colour band, glint and sparkle
Image Generation (Pro): A React AI image generation effect: dots resolve into the picture
Smoke Dissolve (Pro): A React smoke dissolve: an image shreds into grains that drift away
Tilt Open Image (Pro): A React thumbnail that opens full screen as if lifted off the page
Drop Morph (Pro): A React drop zone that morphs into the image you dropped

Install one

npx shadcn@latest add https://charcoalui.com/r/text-swap.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

React Input Components: 68 components
React Navigation Components: 27 components
React Dialog, Popover and Tooltip Components: 19 components
React Loading, Progress and Toast Components: 23 components
React Card, Accordion and Display Components: 67 components
React AI Chat and Agent Components: 20 components
React Chart and Data Table Components: 24 components
Animated React Icons: 2 components
React UI Sound Effects: 2 components
React Text Animations: 41 components
Animated React Backgrounds: 86 components
React Cursor Effects: 17 components
React Image Effects: 14 components
Interactive React Animations: 27 components

Frequently asked questions

What is a micro-interaction?: A small animated response to one action, such as a badge popping when a count changes or a check drawing when a save completes.
Do transitions work with Next.js page routing?: Yes. Page Transition wraps your route content, and the rest are local to the component that changes state.
Which transitions are free?: A couple of everyday ones are free and MIT; the rest are part of Pro, and every one can be tried live first.
Do these UI transitions and micro-interactions work with shadcn/ui?: Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.