Toggle Group animation
Items dip while pressed, and a single choice glides to the item you pick.
with <Cuts />
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| An item is pressed | Dips to 97% | 70 ms in, 150 ms out | Automatic |
| A single choice moves | The selection glides to it | 200–320 ms | Automatic |
A selection moved with the arrow keys stays instant.
Install
Toggle Group is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add toggle-groupTurn it off
Put data-cut="none" on a toggle group (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.