# Drawer
> Generated from drawer.contract.json — do not edit by hand.

A side panel that slides in for a longer edit or detail view — rendered through the shared Drawer.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `open` | boolean | `false` | Controls visibility |
| `title` | string | `—` | Panel heading |
| `placement` | top | right | bottom | left | `right` | Which edge it slides from |
| `width` | number | string | `378` | Panel width for left/right (large ≈ 736) |
| `height` | number | string | `378` | Panel height for top/bottom (large ≈ 480) |
| `size` | default | large | `default` | antd preset size (378/736 l·r); the DS default is 378 |
| `footer` | ReactNode | `—` | Pinned actions row (keep the primary action here) |
| `mask` | boolean | `true` | Dim + scroll-lock the page behind the panel |
| `closable` | boolean | `true` | Show the header close (X) |
| `onClose` | () => void | `—` | Dismiss handler |

## Visual standard (measured)
- Panel: white surface, slides from the right (or any edge)
- Title: ink #1A1A1A · SemiBold
- Body: 24 padding · ink text
- Mask: ink overlay rgba(26,26,46,.7)
- Motion: antd's built-in slide enter/leave (kept)

## When to use
- **Drawer** — a longer edit form or detail panel where keeping page context matters
- **Modal** — a short, blocking decision the user must complete first
- **a page** — the task is large enough to deserve its own route

Give it a clear title and keep the primary action pinned in a footer. Right placement for settings/edit; bottom for mobile-style sheets.