Sheet

Overlay

A panel that slides in from the edge of the screen.

Sheets are used for secondary, contextual content. Built on the Base UI Drawer primitive, so they support swipe-to-dismiss gestures and snap points.

npx shadcn@latest add sheet

Sides

Choose where the sheet slides in from. Content accepts a side prop.

Preview

Live

tsx

1<Sheet open={open} onOpenChange={setOpen}>
2  <SheetPortal>
3    <SheetOverlay />
4    <SheetContent side="right">
5      <SheetHeader>
6        <SheetTitle>right sheet</SheetTitle>
7        <SheetDescription>Sheet content here.</SheetDescription>
8      </SheetHeader>
9      <SheetFooter>
10        <SheetClose render={<Button variant="outline">Cancel</Button>} />
11        <Button>Save changes</Button>
12      </SheetFooter>
13    </SheetContent>
14  </SheetPortal>
15</Sheet>

Controlled sheets

Pass open and onOpenChange to drive the sheet from your own state. Set swipeDirection to match the side for correct drag gestures.

Preview

Live

tsx

1const [open, setOpen] = useState(false)
2const [side, setSide] = useState("right")
3
4<Sheet
5  open={open}
6  onOpenChange={setOpen}
7  swipeDirection={side}
8>
9  <SheetPortal>
10    <SheetOverlay />
11    <SheetContent side={side}>...</SheetContent>
12  </SheetPortal>
13</Sheet>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
side	"left" \| "right" \| "top" \| "bottom"= "right"	Which edge the sheet slides in from.
open	boolean= false	Controlled open state.
onOpenChange	(open, eventDetails) => void	Called when the sheet opens or closes.
swipeDirection	"left" \| "right" \| "top" \| "bottom"= "down"	Direction of the swipe gesture that dismisses the sheet.
modal	boolean= true	Blocks page interaction while open.