Drawer

Drawer is a compound component for edge-mounted overlays that preserve more page context than a centered modal.

Overview

Drawer styling is driven mostly by the same semantic surface model as other overlays. Most customization should happen at the theme layer, not by rebuilding the panel layout from scratch.

Public CSS Variables

Variable	Value	Affects
Main drawer surface.`DrawerContent`		No visible change in this state
Elevated panel shadow.`DrawerContent`		No visible change in this state
Backdrop dimming.`DrawerContent::backdrop`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

DrawerContent relies on theme surface tokens plus local sizing and layout rules.
The backdrop is the ::backdrop of DrawerContent. It uses --overlay, a blur when blurred is true, and no background when overlay is false. Style it through the DrawerContent class (.my-drawer::backdrop).
Headings and close buttons inside DrawerContent should usually inherit the panel surface rather than introduce separate colors.

State And Variant Interaction

overlay={false} and blurred={false} on DrawerContent change the backdrop presentation, not the modal behavior.
Long content requires layout decisions more than theme overrides.
If the drawer behaves like a floating inspector, keep contrast and shadow cues strong enough to separate it from page content.

Examples

.brand-theme {
  --surface-primary: oklch(99.2% 0.006 80);
  --surface-shadow: 0 24px 64px oklch(20% 0.02 60 / 0.18);
}

Apple-like header

The header with a small title and a 24px round close button in the corner is plain composition: a Heading with size={4} and fontWeight={600}, and DrawerClose asChild around an IconButton placed absolutely in the top end corner (position: absolute, insetBlockStart: 16, insetInlineEnd: 16); the open modal <dialog> is its containing block. IconButton has no size or shape option for this; the round 24px button comes from two CSS variables set on it, --icon-button-size: 24px and --icon-button-br-ratio: 0.5, with Icon size='xs' inside.

Do Not Override

Do not restyle the drawer into a page without retesting overlay behavior.
Do not weaken contrast between surface and backdrop.
Do not treat layout width and scroll strategy as pure color-theming concerns.