Install

Install

bun

bun add scrollsheet

npm

npm i scrollsheet

pnpm

pnpm add scrollsheet

yarn

yarn add scrollsheet

Import

Then import the component and the stylesheet, once per app:

import { Sheet } from 'scrollsheet';
import 'scrollsheet/styles.css';

Prefer zero config? import { Sheet } from 'scrollsheet/auto' embeds the stylesheet, no CSS import needed. Sheet.* is client-only: in Next.js App Router, add "use client" to the file that renders it.

Non-dismissible confirm

Full source on GitHub ↗

The smallest complete sheet: a title, a body, two buttons. Drag it down; it will not go.

Discard changes

No peer dependencies beyond React and React DOM, 18 or newer.

shadcn/ui

Every primitive and pattern also ships as a registry item, installable with the shadcn CLI:

bunx shadcn@latest add https://scrollsheet.dev/r/drawer.json
bunx shadcn@latest add https://scrollsheet.dev/r/sheet.json
bunx shadcn@latest add https://scrollsheet.dev/r/dialog.json
bunx shadcn@latest add https://scrollsheet.dev/r/confirm.json
bunx shadcn@latest add https://scrollsheet.dev/r/share-sheet.json
bunx shadcn@latest add https://scrollsheet.dev/r/sidebar.json
bunx shadcn@latest add https://scrollsheet.dev/r/toast.json

Or pull the same files straight off GitHub: swap https://scrollsheet.dev/r/ for https://raw.githubusercontent.com/ansumanshah/scrollsheet/main/registry/.

Each writes one file into components/ui/: drawer.tsx, sheet.tsx, dialog.tsx, confirm.tsx, share-sheet.tsx, sidebar.tsx, toast.tsx. confirm and share-sheet build on drawer; sidebar builds on sheet; the CLI pulls those in automatically. What each one gives you: Recipes.

• Directorycomponents/

  • Directoryui/

    • drawer.tsx
    • sheet.tsx
    • dialog.tsx
    • confirm.tsx
    • share-sheet.tsx
    • sidebar.tsx
    • toast.tsx

Already on vaul or Sonner?

Migrate from vaulDrop-in replacement for vaul's Drawer namespace, same props, same data-vaul-* attributes for existing CSS.

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.