Haedong
010

Sheet

Overlay

Not opened

Customize

Side

Code

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open</Button>
<Sheet open={open} onOpenChange={setOpen}>
  <SheetHeader>
    <SheetTitle>Settings</SheetTitle>
    <SheetClose />
  </SheetHeader>
  …
</Sheet>

Install

npx shadcn@latest add https://components.haedong.dev/r/sheet.json

Props

Sheet props below. SheetHeader is a baseline row; SheetTitle labels the dialog; SheetClose is a muted text button (children = label, default "Close"). Renders through a portal into <body>.

PropTypeDescription
openbooleanControlled visibility.
onOpenChange(open: boolean) => voidCalled with false on Esc, backdrop click or SheetClose.
side"right" | "left"Edge the panel attaches to; the hairline sits on that edge. Defaults to "right".
aria-labelstringLabels the dialog when there is no SheetTitle.
classNamestringExtra classes for the panel (default width w-80, max-w-full).