Sheet

bunx shadcn@latest add @nalarx/sheet

UsageCopy Anchor Link

<Sheet open={open} onOpenChange={setOpen}>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Invite member</SheetTitle>
    </SheetHeader>
    <div className="flex-1 overflow-y-auto px-5 py-4">{/* body */}</div>
    <SheetFooter>
      <SheetFooterError>{error}</SheetFooterError>
      <SheetClose render={<Button variant="ghost" />}>Cancel</SheetClose>
      <Button variant="accent" onClick={send}>Send invite</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

A plain sheet, and one whose footer shows an error. The panel opens in the docs page's own scheme.

StatesCopy Anchor Link

• Open: slides 40px in from the right while fading; exit reverses it and can be interrupted. No motion under reduced motion.
• Width: full width on phones, 448px from sm up. Pass className="sm:max-w-xl" for a wider panel.
• Error: SheetFooterError renders nothing when empty; with text it takes the free width left of the actions and is announced (role="alert").

KeyboardCopy Anchor Link

Same as Dialog: focus stays inside, Escape closes and returns focus to the trigger, Tab cycles through the panel.

PropsCopy Anchor Link

Sheet takes Base UI Dialog.Root props; SheetContent takes Dialog.Popup props plus:

ReplacesCopy Anchor Link

Platform base/Sheet.tsx.