Drawer

A blocking side-panel overlay that slides in from an edge of the screen, with the full modal accessibility contract: focus trap, scroll lock, Escape-to-close, backdrop dismissal, and focus return.

Installation

npx dafink-ui add drawer

Demo

Composition

</DrawerHeader>

</Drawer>

Props

Name	Type	Default	Description
open	boolean	-	Controls whether the drawer is rendered and visible (controlled).
onOpenChange	(open: boolean) => void	-	Called with false when the user dismisses via Escape, backdrop click, or DrawerClose.
side	"left" \| "right" \| "top" \| "bottom"	"right"	Which edge of the screen the drawer slides in from.
className	string	""	Additional classes merged onto the drawer panel element.
children	ReactNode	-	Drawer subcomponents (DrawerHeader, DrawerTitle, DrawerContent, DrawerFooter, DrawerClose) and arbitrary content.

Accessibility

Drawer shares Modal's full blocking-overlay contract — native <dialog> with showModal(), role="dialog", aria-modal="true", aria-labelledby — just with a translate-based slide-in animation instead of fade + scale. Focus moves to the first focusable element in the panel on open, is trapped inside it (Tab/Shift+Tab wrap, re-queried on every press), and returns to the trigger on any close path (Escape, backdrop click, `DrawerClose`, or unmount).

Key	Function
`escape`	Closes the drawer and returns focus to the trigger.
`tab`	Moves focus to the next focusable element inside the panel, wrapping from the last back to the first (focus trap).
`shift`+`tab`	Moves focus to the previous focusable element inside the panel, wrapping from the first back to the last.
`enter`	Activates the focused button (native behavior).