Combobox animation
The list opens from the input on your theme's curve, the chevron turns, and picked items tick.
with <Cuts />
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| The list opens or closes | Grows from the input and returns to it | your theme's timing | Automatic |
| Its chevron | Turns while the list is open | 200 ms | Automatic |
| An item is picked | Its tick draws itself | 150 ms | Automatic |
| A chip is added | Pops in from 85% | 220 ms | Automatic |
Moving the highlight with the arrow keys stays instant.
Install
Combobox is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add comboboxTurn it off
Put data-cut="none" on a combobox (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.