Drawer
Slide-in panel rendered in a portal. Supports all four edges, multiple sizes, and smooth CSS animations.
Playground
title
placement
size
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.
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 |
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 |