Migrate from vaul
import { Drawer } from 'vaul';import { Drawer } from 'scrollsheet';Drop-in: same Drawer.* namespace, translated onto Sheet.*. Nesting is automatic: no
separate NestedRoot.
| vaul API | Maps to |
|---|---|
snapPoints, activeSnapPoint, direction (all 4 edges), modal={false}, onAnimationEnd, onClose, fadeFromIndex, handleOnly, snapToSequentialPoint, onRelease, preventCycle (on Drawer.Handle), asChild |
A real feature, 1:1 |
shouldScaleBackground |
backgroundEffect; your [data-vaul-drawer-wrapper] is picked up automatically |
closeThreshold |
A real feature; the adapter converts conventions (vaul counts the drag away, scrollsheet counts what remains), so vaul’s 0.25 default keeps its feel. Only live when snapPoints is unset, matching vaul |
onOpenStart / onCloseStart |
onOpenChange (fires at the state flip) |
onOpenEnd / onCloseEnd |
onOpenChangeComplete(open) (fires once the transition visually finishes) |
data-vaul-drawer, -direction, and -snap-points still land on Drawer.Content;
data-vaul-handle on Drawer.Handle, so CSS written against vaul’s selectors keeps matching.
Title, Description, and Close get no vaul-branded attribute.
Migrate from SonnerDrop-in replacement for toast, useSonner, and Toaster, built on one non-modal Sheet.Root per Toaster instead of Sonner's DOM stack.