Component
⬜

Drawer

Side-panel overlay with placement variants, smooth slide animation, focus trap, and backdrop dismiss.

Import

import { Drawer } from '@stareezy-ui/components'

Basic usage

Live Preview

const [open, setOpen] = useState(false)

<Button onPress={() => setOpen(true)}>Open drawer</Button>

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Settings"
>
  <Text>Drawer content goes here</Text>
</Drawer>

Placement

// Slide in from the left (default)
<Drawer placement="left" open={open} onClose={onClose} title="Menu">
  ...
</Drawer>

// Slide in from the right
<Drawer placement="right" open={open} onClose={onClose} title="Cart">
  ...
</Drawer>

// Slide up from the bottom
<Drawer placement="bottom" open={open} onClose={onClose} title="Options">
  ...
</Drawer>

// Slide down from the top
<Drawer placement="top" open={open} onClose={onClose} title="Notification">
  ...
</Drawer>

Size variants

<Drawer size="sm" ...>...</Drawer>   // 280px
<Drawer size="md" ...>...</Drawer>   // 360px (default)
<Drawer size="lg" ...>...</Drawer>   // 480px
<Drawer size="full" ...>...</Drawer> // 100% width/height

Without backdrop

<Drawer
  open={open}
  onClose={onClose}
  title="Side panel"
  backdrop={false}
>
  ...
</Drawer>

Footer actions

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  title="Confirm action"
  footer={
    <>
      <Button variant="ghost" onPress={() => setOpen(false)}>Cancel</Button>
      <Button variant="primary" onPress={handleConfirm}>Confirm</Button>
    </>
  }
>
  <Text>Are you sure you want to proceed?</Text>
</Drawer>

Props

PropTypeDescription
openreqbooleanControls whether the drawer is visible.
onClosereq() => voidCalled when the drawer should close (backdrop press, Escape key, or close button).
titlestringDrawer header title. Used as the accessible dialog label.
placement"left" | "right" | "bottom" | "top"Side the drawer slides in from. Defaults to "right".
size"sm" | "md" | "lg" | "full"Panel size (width for left/right, height for top/bottom). Defaults to "md".
backdropbooleanShow a dimming backdrop behind the drawer. Defaults to true.
closeOnBackdropPressbooleanClose when the backdrop is pressed. Defaults to true.
footerReactNodeContent rendered in the sticky footer area of the drawer.
childrenReactNodeDrawer body content.

Accessibility

ℹ
Drawer renders with role="dialog" and aria-modal="true". When the drawer opens, focus is moved to the first focusable element inside the panel. Focus is trapped within the drawer while it is open — Tab and Shift+Tab cycle through drawer controls only. Pressing Escape closes the drawer and returns focus to the trigger element.

Themes

Drawer is Theme_Reactive — panel background, header, border, backdrop opacity, and close button colors are all resolved from the Active_Theme at render time. Works across all five built-in themes: quasar, light, dark, aurora, and steins-gate.