Drawer

A bottom sheet that can be dragged shut — the touch-first counterpart to Sheet, for a short task that should not take the person off the page.

tsx

1import {
2  Drawer,
3  DrawerTrigger,
4  DrawerContent,
5  DrawerHeader,
6  DrawerTitle,
7  DrawerDescription,
8  DrawerFooter,
9  DrawerClose,
10} from "@pestoui/core"

Bottom drawer

Constrain the inner column yourself: the drawer spans the viewport, and a short form reads better at a fixed measure.

Props

Prop	Type	Default	Description
open / defaultOpen / onOpenChange	boolean / boolean / (open: boolean) => void	—	On Drawer. Controlled or uncontrolled open state.
direction	"top" \| "right" \| "bottom" \| "left"	"bottom"	On Drawer. The edge it slides from; the drag handle is drawn only for bottom.
dismissible	boolean	true	On Drawer. When false, dragging, Escape and an outside press no longer close it.
autoFocus	boolean	true	On Drawer. Moves focus into the drawer as it opens, so Tab stays inside it. The underlying primitive defaults to false; this wrapper turns it on.
asChild	boolean	—	On DrawerTrigger and DrawerClose. Hands the behaviour to the child element.

PreviousDot Bars Next Dropdown Menu

Pesto UI · 117 documented components