Alert Dialog animation
Animate the shadcn/ui Alert Dialog: the confirmation grows out of the button that asked for it and closes back into it, with no changes to your code.
What it fixes
A confirmation should read as the answer to the button you pressed. With Keyframery, an alert dialog grows out of the Delete button and closes back into it, so you never lose track of what you're confirming.
Install
npx shadcn add alert-dialogNothing else, as long as <Cuts /> is in your layout.
Choose a cut
Alert dialogs follow the dialog menu:
<Cuts dialog="punch-in" />
<AlertDialogContent data-cut="fade" />Prop
Type
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.
Sheet
Animate the shadcn/ui Sheet: it slides in from its edge while the page steps back behind it, and everything returns when it closes. No code changes.