Sheet

shadcn/ui sheet on DESIGN.md tokens. A panel attached to one edge of the viewport: surface with a hairline on the attached side and the one soft shadow, 4px corners on the exposed edge as on Drawer, over the same scrim as Dialog. Header and footer are fixed with 24px padding; the body scrolls between them. Use it for an inspector or a quick edit that keeps the page in view; side panels that stay open belong in the shell instead.

<Sheet>
  <SheetTrigger asChild><Button variant="outline">Inspect</Button></SheetTrigger>
  <SheetContent side="right">
    <SheetHeader><SheetTitle>Offer</SheetTitle><SheetDescription>…</SheetDescription></SheetHeader>
    <SheetBody>…</SheetBody>
    <SheetFooter><SheetClose asChild><Button variant="outline">Cancel</Button></SheetClose><SheetClose asChild><Button>Accept offer</Button></SheetClose></SheetFooter>
  </SheetContent>
</Sheet>