Anatomy

import { Sheet } from 'scrollsheet';

<Sheet.Root>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Content>
    <Sheet.Handle />
    <Sheet.Title>Title</Sheet.Title>
    <Sheet.Description>Description</Sheet.Description>
    <Sheet.Close>Done</Sheet.Close>
  </Sheet.Content>
</Sheet.Root>

Sheet.Root owns state and renders nothing itself. Sheet.Trigger opens it on click; skip it and drive open/onOpenChange yourself for a fully controlled sheet. Sheet.Content is the <dialog>, backdrop, scroll track, and panel together. The rest are optional, each wiring one piece of behavior onto a plain element: Sheet.Handle, Sheet.Title, Sheet.Description, and Sheet.Close. Full shape of each in Other exports.

API referenceFull prop reference for Sheet.Root, the styling hooks on Sheet.Content, and every other named export.