Drawer

A Card docked to one edge of the viewport as a slide-in panel, built on Radix Dialog for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional title renders a header with a close button, otherwise just the children are shown.

placement controls which edge it docks to; backdrop controls whether it blocks the rest of the page or floats alongside content the user can keep interacting with, e.g. an always-visible properties panel. For a centered dialog that always blocks the page, use @behivetech/atoms.modal instead.

Usage

Props

Prop	Type	Default	Description
onClose	() => void	—	Called when the drawer is dismissed (backdrop click, Escape, or the close button) — required
title	string	—	Optional header title; omit to render no header and no close button
icon	ReactNode	—	Optional icon rendered before the title; ignored if title is omitted
padding	none | sm | md | lg	none	Internal padding of the panel body — same values as Card's padding prop
headingLevel	1 | 2 | 3 | 4 | 5 | 6	3	Which heading tag wraps title — same values as Card's headingLevel prop
placement	top | right | bottom | left	—	Which edge the panel docks to — required
backdrop	boolean	true	Whether a dimmed backdrop blocks the page and closes the drawer when clicked
children	ReactNode	—	Panel content
className	string	—	Additional class names