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

<Drawer>
<DrawerClose />
<DrawerHeader>
<DrawerTitle />
</DrawerHeader>
<DrawerContent />
<DrawerFooter />
</Drawer>

Props

NameTypeDefaultDescription
openboolean-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.
classNamestring""Additional classes merged onto the drawer panel element.
childrenReactNode-Drawer subcomponents (DrawerHeader, DrawerTitle, DrawerContent, DrawerFooter, DrawerClose) and arbitrary content.