How to Use

Drawer

Drawer slides in a panel from the right edge of the screen over the page content. It is a compound component — Drawer wraps DrawerTrigger (the element that opens it) and DrawerContent (the panel body). Drawer includes a backdrop overlay that closes the drawer on click. Use it for filters, detail views, navigation menus, or any secondary content that should not require a full page navigation.

import {Drawer} from "oks-ui"

Basic Drawer with Trigger

The compound structure: <Drawer> wraps everything, <DrawerTrigger> is a clickable element (typically a Button), and <DrawerContent> contains the panel body. The drawer slides in from the right with an animated transition. The backdrop appears behind it — clicking the backdrop or pressing Escape closes the drawer. No state management needed — the drawer manages its own open/close state internally.

<Drawer>
  <DrawerTrigger>
    <Button color="primary" variant="soft">
      Open Filters
    </Button>
  </DrawerTrigger>
  <DrawerContent>
    <div className="space-y-6 p-6">
      <h2 className="text-lg font-semibold">Filters</h2>
      <div className="space-y-4">
        <div>
          <p className="mb-2 text-sm font-medium">Category</p>
          <div className="space-y-2">
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" /> Electronics
            </label>
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" /> Clothing
            </label>
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" /> Books
            </label>
          </div>
        </div>
        <Button color="primary" fullWidth>Apply Filters</Button>
      </div>
    </div>
  </DrawerContent>
</Drawer>

Accessibility

Drawer traps focus inside DrawerContent when open — Tab cycles through elements within the panel, preventing focus from escaping to the page behind. The Escape key closes the drawer. The DrawerTrigger has aria-expanded reflecting open/close state. DrawerContent receives focus on open. The backdrop has aria-hidden="true". The drawer uses role="dialog" and aria-modal="true" on the panel for screen reader announcement.

Props Reference

All available props for Drawer. See the full API reference page for interactive playground examples.

Prop	Type	Default	Description
isOpen	boolean	`—`	Controls visibility (required).
onClose	() => void	`—`	Called when drawer is dismissed (required).
position	"left" \| "right" \| "top" \| "bottom"	`"right"`	Slide-in direction.
title	ReactNode	`—`	Drawer header title.
closeOnOutsideClick	boolean	`true`	Close on backdrop click.
closeOnEscape	boolean	`true`	Close on Escape key.
dismissible	boolean	`true`	Show close button.
size	"sm" \| "md" \| "lg" \| number \| string	`"md"`	Width (left/right) or height (top/bottom).
blur	boolean \| 'sm' \| 'md' \| 'lg' \| number	`false`	Backdrop blur.
portal	boolean	`true`	Render in portal.

Best Practices

◆Drawer is a compound component — always nest DrawerTrigger and DrawerContent inside Drawer
◆Use Drawer for filters on listing pages, detail previews (e.g., clicking a row in a table), and settings panels
◆The backdrop click and Escape key close the drawer by default — no manual handling needed
◆DrawerContent accepts any children — build your panel layout with standard divs, forms, and buttons
◆The drawer slides in from the right by default — placement customization is available via props (see API reference)
◆Keep drawer content focused — avoid complex multi-step flows inside a drawer; use a modal or separate page instead

View full API reference for Drawer →