Badge animation
A count in a badge rolls to its new value instead of flickering. Works on Base UI and Radix through <Cuts />.
with <Cuts />
1,284
Status: Pending
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| Its number changes | Changed digits roll, with a small punch | 300 ms | ValueCut |
Install
Install ValueCut and wrap the part that changes: npx shadcn add @keyframery/value-cut.
Turn it off
Put data-cut="none" on a badge (or anything around it) to keep shadcn's own motion there. <Cuts responses="none" /> turns off every response across the app and keeps the cuts. With reduced motion, movement becomes a short fade or nothing.