Command menu animation
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.
Command menu
Search for a command
What it fixes
CommandDialog is a dialog, so it gets the same rack focus: it grows out of the button you pressed, or from the centre when you open it with a shortcut. The search on this site runs on it. Press ⌘K to try it.
Install
npx shadcn add commandChoose a cut
The command menu follows the dialog menu:
<Cuts dialog="punch-in" />Prop
Type
A keyboard shortcut counts as a press only when a focused element receives it. A global ⌘K listener has no opener, so the menu opens from the centre.
Toast and Sonner
Animate shadcn/ui Sonner toasts: each toast flies out of the button you pressed, so people see which action it belongs to. Base UI toasts work too.
Tuned components
Popover, dropdown menu, select, tooltip, accordion and six more shadcn/ui components already animate well. Keyframery gives them one speed and easing.