Drawer

Overlay

A bottom-anchored panel with swipe-to-dismiss gestures.

A bottom sheet for mobile-style actions. Drawer inherits all of Base UI's Drawer features, including snap points and swipe dismissal.

npx shadcn@latest add drawer

Bottom sheet

A rounded panel that slides up from the bottom with a drag handle.

Preview

Live

tsx

1const [open, setOpen] = useState(false)
2
3<Drawer open={open} onOpenChange={setOpen}>
4  <DrawerPortal>
5    <DrawerOverlay />
6    <DrawerContent>
7      <DrawerHeader>
8        <DrawerTitle>Notifications</DrawerTitle>
9        <DrawerDescription>You are all caught up.</DrawerDescription>
10      </DrawerHeader>
11      <DrawerClose render={<Button variant="outline">Close</Button>} />
12    </DrawerContent>
13  </DrawerPortal>
14</Drawer>

Snap points

Snap the drawer to preset heights by passing snapPoints to the root.

Preview

Live

tsx

1<Drawer snapPoints={["148px", 1]}>
2  <DrawerPortal>
3    <DrawerOverlay />
4    <DrawerContent>...</DrawerContent>
5  </DrawerPortal>
6</Drawer>

API reference

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

Prop	Type	Description
open	boolean= false	Controlled open state.
onOpenChange	(open, eventDetails) => void	Called when the drawer opens or closes.
snapPoints	(string \| number)[]	Heights to snap to. Numbers between 0 and 1 are viewport fractions.
swipeDirection	"left" \| "right" \| "top" \| "bottom"= "down"	Direction of the dismissing swipe gesture.
modal	boolean= true	Blocks page interaction while open.