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.
No canonical Figma Drawer COMPONENT_SET — a future Figma build should follow React DrawerBody/DrawerFooter composition, not instructional placeholders.

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

Compound React API matching Dialog: DrawerHeader/Title/Description/Close stay structured; DrawerBody and DrawerFooter accept arbitrary ReactNode. No canonical Figma Drawer COMPONENT_SET — React composition is the source of truth. Left viewport edge flush; exposed right corners rounded (topRightRadius=0 on the viewport-attached corner).

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.

Does Drawer body/footer accept arbitrary composition?

Yes. DrawerBody and DrawerFooter take ReactNode children. React composition is canonical because no Figma Drawer master exists. Closed Drawers unmount portal content by design, unlike Accordion’s CSS-hidden panels.

Tokens used

component/card/surfacecomponent/radius/container

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"	Implemented left-edge placement.
closeOnOverlayClick	boolean	true	Backdrop dismissal.
DrawerBody children	React.ReactNode	—	Arbitrary body composition.
DrawerFooter children	React.ReactNode	—	Arbitrary action/footer composition.
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>
  );
}