Drawer

A content-sized bottom task panel, centered on wide screens and bounded to the viewport.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Project export2 records

Two sample records. No account or server required.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add drawer

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Drawer>
  <DrawerTrigger>Export records</DrawerTrigger>
  <DrawerContent size="md">
    <DrawerHeader>
      <DrawerTitle>Export records</DrawerTitle>
      <DrawerDescription>Choose your file format.</DrawerDescription>
    </DrawerHeader>
    <DrawerBody>Export options</DrawerBody>
    <DrawerFooter><DrawerClose>Done</DrawerClose></DrawerFooter>
  </DrawerContent>
</Drawer>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Root: open / defaultOpen / onOpenChange`	`boolean / boolean / (open: boolean) => void`	`uncontrolled, closed`
`Content: size`	`sm \| md \| lg`	`md`
`Content: initialFocusRef / returnFocusRef`	`RefObject<HTMLElement \| null>`	`first focusable / invoker`
`Content: dismissOnOutside`	`boolean`	`true`
`Trigger / Close`	`ButtonProps, native button ref`	`primary / secondary`

Accessibility

Uses native modal HTML dialog with inert background, nested scroll locks, Tab/Shift+Tab loop, Escape dismissal, and focus restored to the invoker or returnFocusRef. Provide one Title or explicit aria-label/aria-labelledby, one optional short Description, and a visible Close action. initialFocusRef must point to a visible descendant; focus Title and set aria-describedby="" for long structured reading. Controlled consumers must honor onOpenChange to dismiss. Outside dismissal requires both press and release on the backdrop; set dismissOnOutside=false to disable it. Native onCancel can prevent Escape. Content stays mounted while closed, so reset drafts on opening if needed. Root has no DOM/ref. Content forwards native dialog attributes/events and its HTMLDialogElement ref; Header/Body/Footer div, Title h2, Description p, Trigger/Close button. Keep Header, Body, Footer as direct children of Content or of one direct form; Body scrolls while header and footer remain visible. Keep headings/descriptions concise on short viewports. No portal, legacy dialog polyfill, swipe, drag, or snap points are included. Drawer is a bottom task pattern with intrinsic height capped at 85dvh and widths 400/640/800px, capped to 100% of the viewport. It is distinct from a full-height Sheet. Use visible actions to close it; there is no drag-handle affordance or gesture dismissal. Safe-area insets protect content and footer actions on mobile. This primitive does not provide an export backend; the example downloads local sample data.