Zetta v0.10

Components · Overlays

Drawer

A panel that slides in from an edge over a scrim — for filters, detail, or a secondary task that needs more room than a popover. It sits on a card surface with shadow-lg; anchored to the right, only its left corners round. Build it on the native <dialog> so focus-trap, Escape, and the backdrop come for free.

Preview

The drawer surface across the three themes (note the shadow disappears in Accessibility).

Light
Filters
Refine the list by status, owner, and date. Changes apply as you go.
Dark
Filters
Refine the list by status, owner, and date. Changes apply as you go.
Accessibility
Filters
Refine the list by status, owner, and date. Changes apply as you go.

Live demo

Open a real right-edge drawer — Tab is trapped inside, Escape and the buttons close it.

Filters
Refine the list by status, owner, and date. Changes apply as you go.

Spec

Values and token references straight from the Zetta spec.

drawer
backgroundColor
{colors.surface-card}
textColor
{colors.ink}
borderColor
{colors.hairline}
borderWidth
1px
borderRadius
8px 0 0 8px
shadow
{shadows.lg}
padding
{spacing.page}
width
400px
titleFontFamily
Inter
titleFontSize
18px
titleFontWeight
600
titleLineHeight
1.35
bodyFontFamily
Geist
bodyFontSize
14px
bodyColor
{colors.body}
drawer-overlay
backgroundColor
{colors.overlay}

Build with the skill

No package to install — hand this to your AI to generate the drawer in your stack (native <dialog>, or your framework's accessible modal).

Prompt for your AI 
Implement the Zetta "Drawer" component in this project's stack using the zetta-design-md skill.

- Apply the `drawer` spec from the skill (variants: drawer, drawer-overlay).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

  • Card surface, 1px hairline, shadow-lg, 400px wide, page padding; scrim is var(--color-overlay). Right-edge default rounds only the left corners (var(--radius-base) 0 0 var(--radius-base)).
  • Title is Inter 18/600; body Geist 14/400. Use a drawer over a dialog when the content is a list or a longer side task.
  • 11Trap focus while open and restore it to the trigger on close (native <dialog> does this for you).

Accessibility

  • Modal by default: the rest of the page is inert while open. Close on Escape and scrim click; give the panel an accessible name with aria-labelledby.

Known gaps

  • Left/top/bottom edge variants, slide-in motion timing, and non-modal drawers are not yet specified — the spec defines the right-edge surface.