Question 1

Why use this instead of vaul?

Accepted Answer

vaul is the React drawer nearly everyone ships: 37 million downloads a week. scrollsheet drags via the browser's own scroll engine instead of simulating the gesture with pointer events, and renders a real native dialog instead of a portal, at 16.93 kB gzipped against vaul's Radix Dialog dependency tree.

Question 2

How big is it, really?

Accepted Answer

16.93 kB gzipped, 15.13 kB brotli, the bundled and minified size with React external. Zero runtime dependencies: react and react-dom are peer dependencies only, both 18 or newer.

Question 3

Does it work with Next.js App Router and React Server Components?

Accepted Answer

Yes. Every module that touches state or the DOM opens with a use client directive, including Root, Content, Handle, Trigger, and both compat layers. Render Sheet.Root from a Server Component like any other client component.

Question 4

Does it work with Tailwind?

Accepted Answer

Yes, Tailwind v4 out of the box: no plugin, no config. Utilities on className apply directly because the mechanics stylesheet only wins where it must, position and transform, and sits in zero-specificity where rules everywhere else.

Question 5

How accessible is it?

Accepted Answer

Modal focus containment comes from the platform's own showModal, not a JS focus trap. With two or more detents, Sheet.Handle exposes role slider with aria-valuemin, valuemax, valuenow and valuetext; arrow keys move between stops, Home and End jump to the ends.

Question 6

Which browsers does it support?

Accepted Answer

Spring easing works from Chrome 113, Safari 17.2, and Firefox 112. The compositor-driven backdrop fade needs Chrome or Edge 115 or newer, or Safari 26 or newer; Firefox has it implemented but still behind a flag. Below Safari 15.4 there's no dialog element at all, so the sheet falls back to a plain fixed-position modal with a backdrop, tap-to-close, and Escape, but no detents or drag.

Question 7

Can I migrate from vaul without rewriting?

Accepted Answer

Mostly. Importing Drawer from scrollsheet maps the same Drawer namespace onto Sheet, and props like snapPoints, direction, modal false, and shouldScaleBackground map to real features. Props that only existed to fight the page, like scroll-lock or portal containers, warn once in dev; Radix Dialog.Content only props such as onPointerDownOutside have no equivalent and are stripped.

Question 8

Can I migrate from Sonner without rewriting?

Accepted Answer

Mostly. Importing toast and Toaster from scrollsheet is a drop-in for the same toast and Toaster, including success, error, custom, promise, and toasterId-scoped toasters, running on the same per-toast DOM and positioning real Sonner uses. Existing useSonner calls and .sonner-toast CSS keep working unchanged; new code can call the same hook as useToasts instead. v1 gaps: theme and richColors aren't implemented yet.

Question 9

Does it support snap points?

Accepted Answer

They're called detents. Accepted forms are full, medium, content for natural height, a fraction between 0 and 1, or a pixel string like 320px.

Question 10

Does it handle the iOS keyboard?

Accepted Answer

Yes, automatically. iOS resizes visualViewport, not the layout viewport, when the keyboard opens; scrollsheet listens and writes the inset to a CSS variable, and the panel overdraws past its bottom edge so a stale frame never shows a gap.

Question 11

Does it work inside a Shadow DOM?

Accepted Answer

Rendering works, since the native dialog's top layer is document-level rather than shadow-scoped. The auto-injected mechanics styles land in document.head, which a shadow root doesn't see, so call injectStylesInto(shadowRoot) before any Sheet.Content inside it opens.

Question 12

Is it maintained, and by whom?

Accepted Answer

Yes. scrollsheet is built by Ansuman Shah under the NoodleApps studio name, MIT licensed, currently at version 1.0.0-beta.1.

Frequently asked questions