# Drawer

> A panel that slides in from an edge for a secondary task.

- **Level**: molecule · **Status**: stable · **Role**: surface
- **Import**: `import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter } from "@rrios-forge/ui/molecules/drawer";`
- **Source**: `packages/ui/src/molecules/drawer`

Modal side panel. Composes `@radix-ui/react-dialog` for the full modal contract: `aria-modal`, focus trap, focus return, escape-to-close, outside-click-to-close, body scroll lock, portal isolation. Two semantic axes — `side` (right / left / top / bottom) and `size` (sm / md / lg / xl / full). Mobile (<md) is fullscreen regardless of `side`; the slide animation enters from the configured edge so the affordance stays consistent.

## Use it for

- Side panel → `Drawer` or `Sheet`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `side` | — | `right` `left` `top` `bottom` | `right` | Which side something belongs to. |
| `size` | — | `sm` `md` `lg` `xl` `full` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-molecules-drawer--playground) · frame: `/iframe.html?id=components-molecules-drawer--playground&viewMode=story`
- [Sides](/?path=/story/components-molecules-drawer--sides) · frame: `/iframe.html?id=components-molecules-drawer--sides&viewMode=story`
- [Sizes](/?path=/story/components-molecules-drawer--sizes) · frame: `/iframe.html?id=components-molecules-drawer--sizes&viewMode=story`
- [With long content](/?path=/story/components-molecules-drawer--with-long-content) · frame: `/iframe.html?id=components-molecules-drawer--with-long-content&viewMode=story`
- [Accessibility](/?path=/story/components-molecules-drawer--accessibility) · frame: `/iframe.html?id=components-molecules-drawer--accessibility&viewMode=story`

## Decisions that name it

- ADR-015 — Drawer molecule on top of Radix Dialog
- ADR-016 — NotificationCenter v2: Popover → Drawer + Provider/Hooks

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).