Sheet animation
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.
What it fixes
A stock sheet slides over a page that doesn't react, so the two look flat against each other. With slide-sink, the page behind scales to 0.975, dims slightly and rounds its corners while the sheet arrives. Now the sheet reads as on top. When it closes, the page comes forward again.
The part of the page that steps back is the top-level element in <body> that holds the button you pressed. A sheet opened from inside another sheet doesn't sink the page twice.
Install
npx shadcn add sheetChoose a cut
<Cuts sheet="slide" />
<SheetContent data-cut="fade" />Prop
Type
| Cut | Opening | Closing |
|---|---|---|
slide-sink | from its edge over 460 ms, and the page steps back | 260 ms, and the page returns |
slide | the same, without the page stepping back | same |
fade | opacity only, 200 ms | 150 ms |
Questions
Can the page stay still behind the sheet?
Yes. Use <Cuts sheet="slide" />: the sheet slides in from its edge without the page stepping back.
Alert Dialog
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.
Drawer
Animate the shadcn/ui Drawer: the page steps back behind it as it rises, and its own swipe stays exactly as it was. Works with Base UI and Vaul.