Drawer
Edge-anchored dialog panel that slides in from a screen edge with CSS-only enter/exit motion
Category: overlay · WCAG 2.2-AA · overlay, drawer, panel, slide, dialog
States
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Whether the component is open (controlled). |
defaultOpen | boolean | — | Whether the component is open on first render (uncontrolled). |
onOpenChange | (open: boolean) => void | — | Called with the next open state when it changes. |
side | 'start' | 'end' | 'top' | 'bottom' | end | Edge the panel is anchored to. Drives the slide direction. |
size | string | — | Panel size along its cross axis (width for start/end, height for top/bottom). |
title | React.ReactNode | — | Title text for the component. |
description | React.ReactNode | — | Supporting description text. |
children | React.ReactNode | — | Content rendered inside the component. |
labels | { close?: string } | — | Overrides for the component’s user-visible strings (i18n). |
className | string | — | Additional CSS class names merged onto the root element. |
swipeToDismiss | boolean | false | Allow dragging the header toward its edge to dismiss (opt-in). |
Design tokens
--cascivo-color-surface--cascivo-color-border--cascivo-radius-overlay--cascivo-shadow-overlay--cascivo-motion-enter--cascivo-motion-exit
When to use
- A side or edge panel for navigation, filters, or detail views that needs full-height space
- A modal surface that slides in and locks the page behind it while open
- A controllable open/close panel where the parent owns the state via open/onOpenChange
When not to use
- A short yes/no confirmation — use AlertDialog
- Small content anchored to a trigger element — use Popover
- A gesture-driven, swipe-to-dismiss sheet — use Sheet
How to build an accessible Drawer in React →
Examples
Basic
<Drawer open={isOpen} onOpenChange={setIsOpen} title="Settings">
<SettingsForm />
</Drawer>Bottom drawer with swipe-to-dismiss
Dragging the header past a threshold toward the edge dismisses the panel.
<Drawer defaultOpen side="bottom" size="20rem" swipeToDismiss title="Details">
<OrderDetails />
</Drawer>