ComponentsDrawer

overlaystexulinot agent-emittableapp

Drawer

drawer

Bottom or edge drawer with optional drag dismiss.

Live examples

Bottom drawer

Bottom drawer

Loading demo…

Props

Public props for Drawer
NameKindRequiredDefaultDescription
sizeenum (sm, md, lg, xl)no"md"—
sideenum (top, right, bottom, left, start, end, center)no"bottom"—
dismissOutsidebooleannofalseNon-modal panels only; a Drawer is modal and always dismisses outside
closeOnEscapebooleannofalseNon-modal panels only; a Drawer is modal and always closes on Escape
classstringno——
childrenslotno——

Keyboard

Keyboard behavior for Drawer
KeyAction
—See accessibility notes for keyboard behavior.

Accessibility

  • Same focus model as sheet; prefer labelled titles.

Evidence for drawer

Latest committed gates for drawer (as of 2026-10-23). Static snapshot — not live CI.

Behavior

n/ano behavior scenario

No dedicated behavior scenario for this catalog id (a styled or display surface, covered by its unit and axe tests).

Size (gzip)

@texuli/primitives/drawer · budget 4.00 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Mobile sheets that feel like drawers

Don’t use when

Prefer another component

  • Desktop side navigation (use sidebar)