THEME
MOTION
HAPTIC
SOUND
DRAWER
Slide-in panel anchored to a viewport edge. Non-modal by default; pass `modal` to require explicit close.
Live demo
Import
import { Drawer } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
open | boolean | — | yes | |
onClose | () => void | — | yes | |
children | ReactNode | — | yes | |
title | string | — | — | |
side | 'left'|'right'|'top'|'bottom' | right | — | |
size | number | 360 | — | Width for left/right, height for top/bottom. |
modal | boolean | false | — |
Examples
filters
<Drawer open={show} onClose={close} title="FILTERS" side="right">...</Drawer>Accessibility
Role: dialog
- aria-modal set from `modal` prop
- aria-label from title
Feedback
| Haptic | none |
| Sound | none |
Motion states
enter · exit