Context Menu animation
Opens from the pointer and closes back into it on your theme's curve; checkbox and radio items tick.
What moves
| When | What you see | Timing | How |
|---|---|---|---|
| Opens or closes | Grows from the pointer and returns to it | your theme's timing | Automatic |
| A checkbox or radio item is checked | Its tick draws itself | 150 ms | Automatic |
The highlight follows your pointer and keys instantly.
Install
Context Menu is shadcn's own component. With <Cuts /> in your root layout (Quick start), there's nothing else to add:
npx shadcn add context-menuTurn it off
Put data-cut="none" on a context menu (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.
Command
Animate the shadcn/ui Command menu: it opens with the dialog's cut, growing into place instead of popping in, with no changes to your component.
Dialog
Animate the shadcn/ui Dialog: it grows out of the button that opened it and closes back into it. Works on Base UI and Radix, with no code changes.