Drawer

Slide-in panel rendered in a portal. Supports all four edges, multiple sizes, and smooth CSS animations.

Playground

title

placement

size

Bordered

Hide close ×

Close on backdrop

rounded

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

<Button onClick={() => setOpen(true)}>Open Drawer</Button>

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="My Drawer"
>
  <p>Drawer body content.</p>
</Drawer>

Placement

Slide in from right (default), left, top, or bottom.

With Footer

Use the footer prop for action buttons.

Sizes

sm, md (default), lg, full.

Bordered

Pass bordered to add a panel edge border and internal header/footer dividers.

Close on Backdrop

closeOnBackdrop (default true) controls whether clicking the backdrop closes the drawer. Toggle the switch inside to try it live.

API

Property	Type	Default	Description
`open`*	`boolean`	—	Controls visibility
`onClose`*	`() => void`	—	Called when the drawer should close
`placement`	`"left" \| "right" \| "top" \| "bottom"`	"right"	Edge the drawer slides in from
`size`	`"sm" \| "md" \| "lg" \| "full"`	"md"	Width/height preset
`title`	`ReactNode`		Title shown in the drawer header
`footer`	`ReactNode`		Content in the footer area
`bordered`	`boolean`	false	Add panel edge, header, and footer borders
`closeOnBackdrop`	`boolean`	true	Close on backdrop click
`closeOnEscape`	`boolean`	true	Close on Escape key
`hideCloseButton`	`boolean`	false	Hide the × button
`className`	`string`		Extra class on the drawer panel
`bodyClassName`	`string`		Extra class on the body area