Drawer

overlays

Sliding panel overlay from left or right edge with backdrop, title, close button, Escape key dismiss, and scroll body. Token-driven width, shadow, animation, and colors.

Import

typescript
import { Drawer } from "packages/ui/src";

Props

DrawerProps

PropTypeRequired
openbooleanYes
onClose() => void, title?: string, position?: 'left'|'right', children: ReactNodeYes

Examples

Drawer

Sliding panel overlay from left or right edge with backdrop and dismiss.

Right Drawer

Left Drawer

Metadata

Component Metadata
Familyoverlays
FrameworksNext.js, Astro/EmDash
DescriptionSliding panel overlay from left or right edge with backdrop, title, close button, Escape key dismiss, and scroll body. Token-driven width, shadow, animation, and colors.
PropsDrawerProps (open: boolean, onClose: () => void, title?: string, position?: 'left'|'right', children: ReactNode)
Statesclosed, open-right, open-left, with-title, scrolling
A11y
  • Panel has role=dialog with aria-modal=true
  • Panel has aria-label
  • Close button with aria-label
  • Escape key closes drawer
  • Overlay click closes drawer
Responsive
  • Max-width 90vw on small screens
  • Full height
Motion
  • Slide-in animation from edge
Token Dependencies
  • components.drawer.background
  • components.drawer.overlayColor
  • components.drawer.width
  • components.drawer.padding
  • components.drawer.headerColor
  • components.drawer.headerFontSize
  • components.drawer.borderColor
  • components.drawer.closeColor
  • components.drawer.closeHoverColor
  • components.drawer.zIndex
  • components.drawer.shadow
  • components.drawer.transitionDuration
Content Slotstitle (string), children (ReactNode)
CMS Bindings
  • Drawer title from CMS
  • Content from CMS section
Test Cases
  • Hidden when closed
  • Visible when open
  • Has role=dialog
  • Shows title
  • Close button fires onClose
  • Overlay click fires onClose
  • Has aria-modal=true
  • Passes className through