Containers & Overlays

Drawer

Drawer is an edge-anchored modal panel for supplementary settings, filters, or secondary forms.

Single component

betaReact AvailableFigma AvailableDocs Partial

React last updated: 2026-07-11
Documentation last updated: 2026-06-01
Accessibility target: WCAG 2.2 AA (target)
Version: 0.5.0-beta

Known open questions

Right, top, and bottom placements are not confirmed in Figma — only left placement is implemented.
Swipe-to-close, drag handles, and snap points are not confirmed.
Full-screen mobile Drawer layout is not confirmed — max-width cap used instead.
Figma prose said “left corners rounded, right edge flush” but topRightRadius=0 refers to the viewport-attached corner. Implementation uses left edge flush with right-corner radius per edge-attachment geometry.

Live preview

Left-anchored modal panel with the same focus, inert and dismissal model as Dialog.

Settings panel

Form drawer

Long content

Popover inside Drawer

Purpose

A panel sliding in from a screen edge, similar to Dialog but anchored, for supplementary content, settings, or forms.

Anatomy

Drawer = scrim + edge-anchored panel + title + optional description + body + optional footer + close control.

Variants and states

left

When to use

Settings panels, filters, secondary forms.

When not to use

A decision needing the user's full, undivided attention — use Dialog.

Accessibility

Same focus-trapping and Escape-to-close requirements as Dialog.

Keyboard behavior

Escape closes the topmost overlay. Tab cycles within Drawer. Background is inert while open.

Common mistakes

Forgetting the same accessibility rigor as Dialog just because it feels visually less "modal."

Properties

Title (text), Body (text). Left viewport edge flush; exposed right corners rounded (topRightRadius=0 on the viewport-attached corner). Figma prose “left corners rounded” was ambiguous — implementation follows edge-attachment geometry.

What is the difference between Drawer and Dialog?

Dialog is centered and interrupts workflow for decisions. Drawer is edge-anchored for supplementary content or settings.

When should a Drawer be used?

Use Drawer for settings panels, filters, or secondary forms that need more space than a Popover but less urgency than Dialog.

Should clicking the overlay close Drawer?

Yes when closeOnOverlayClick is enabled and the pointer down occurs on the backdrop.

When should Drawer not use swipe gestures?

Swipe-to-close is not confirmed in Figma and is intentionally omitted until a verified pattern exists.

Tokens used

semantic/surface/defaultcomponent/radius/containershadow-blur/5shadow-color/5

Component API

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	—	Initial open state.
onOpenChange	(open: boolean, reason?: DrawerCloseReason) => void	—	Closure requests always emit false with a reason.
placement	"left"	"left"	Confirmed Figma placement.
closeOnOverlayClick	boolean	true	Backdrop dismissal.
initialFocusRef	RefObject<HTMLElement>	—	Preferred initial focus target.
finalFocusRef	RefObject<HTMLElement>	—	Preferred focus restoration target.

React example

Copy React example

"use client";

import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/Drawer";
import { Button } from "@/components/ui/Button";

export function Example() {
  return (
    <Drawer placement="left">
      <DrawerTrigger>
        <Button type="button">Open drawer</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Filters</DrawerTitle>
          <DrawerClose />
        </DrawerHeader>
        <DrawerBody>
          <p>Drawer body content.</p>
        </DrawerBody>
        <DrawerFooter>
          <Button type="button">Apply</Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}