Migrate from vaul

import { Drawer } from 'vaul';
import 'vaul/style.css';
import { Drawer } from 'scrollsheet';
import 'scrollsheet/styles.css';

Drop-in: same Drawer.* namespace, translated onto Sheet.*. Nesting is automatic: no separate NestedRoot.

Sidebar

Full source on GitHub ↗

Open the drawer and click through its sections. Same Drawer.* import, same markup.

Menu

What maps 1:1

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)
onPointerDownOutside / onInteractOutside with preventDefault()	backdropDismissible={false} on Drawer.Root (blocks backdrop tap, keeps drag and Esc); the onEscapeKeyDown version is escapeDismissible={false}

Scrollsheet-native props with no vaul counterpart (backdropDismissible, escapeDismissible, keyboardExpands, onTravel, scrollbar, actionsRef) forward through Drawer.Root untranslated, so one native feature never forces a full conversion to Sheet.*.

Width

Side sheets size from detents, not CSS

With direction="left" or "right", the panel’s width is the detent (width: var(--scrollsheet-max-detent) in the stylesheet). A width: 360px in your own CSS silently loses, and with no snap points the panel sizes to its content. Map fixed widths to snap points: snapPoints={['360px']} for a fixed panel, snapPoints={[1]} for full-bleed.

What changes

One deliberate accuracy divergence

onRelease’s second argument is the real open/closed outcome here (true only when the sheet stays open). Real vaul always passes true when snapPoints is set, even on a release that dismisses the drawer.

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.

Known gaps

Props that existed to fight the page (scroll-lock, portal containers, manual keyboard handling, fixed) are unnecessary here and warn once in dev. Radix Dialog.Content-only props (onPointerDownOutside, onOpenAutoFocus, onEscapeKeyDown, onCloseAutoFocus, onInteractOutside, onFocusOutside, forceMount) are stripped before they reach the DOM; the outside-interaction and Esc idioms map to backdropDismissible={false} and escapeDismissible={false} per the table above. Drawer.Overlay renders nothing. The backdrop is automatic.

Migrate from SonnerDrop-in replacement for toast, useToasts, and Toaster, running on the same per-toast DOM as real Sonner, with every position, per-toast overrides, and swipe-to-dismiss.