/// Overlay
Sheet
A full-height panel that slides in from the right for detail views and side forms that shouldn't cover the whole screen.
import { Sheet } from "@protocore/pds";Basics
Built on the Dialog primitive, so the parts match: Sheet.Root / Trigger / Content / Title / Description / Footer / Close. The panel slides in from the right over a dimmed backdrop and keeps the page context visible beside it.
Sizes
size sets the panel width: sm 360 (quick detail), md 480 (the default drawer), lg 640 (forms and side-by-side content).
When to use it
A Sheet is the detail drawer: inspect a row, review a record, edit in a side form — while the list or page stays visible behind it for context. It's modal (backdrop + focus trap) but occupies an edge rather than centering, which suits taller content and keeps the user oriented.
Choose a [Dialog](/overlay/dialog) instead when the task is short and self-contained and a centered card reads better. Choose a [Popover](/overlay/popover) when the content is small, anchored to a control, and needn't block the page. Reach for a Sheet specifically when the content is a long, scrollable detail or form tied to something the user selected — the classic master-detail pattern within an [AppShell](/layout/app-shell).
Usage
Do
- Use it for master-detail: keep the list visible, show the record in the drawer.
- Pick a size that fits the content — sm for detail, lg for forms.
- Include a Sheet.Title for accessibility, as with Dialog.
- Pin actions in Sheet.Footer so they stay reachable as content scrolls.
Don't
- Use a Sheet for a two-line confirmation — that's a Dialog or AlertDialog.
- Stack multiple Sheets; navigate within one panel instead.
- Make it so wide it becomes a full-page takeover — that should be a route.
- Omit the Title — Radix warns and screen readers need the label.
Accessibility
| Keys | Action |
|---|---|
| Esc | Closes the sheet and returns focus to the trigger. |
| Tab | Cycles focus forward, trapped within the panel. |
| Shift + Tab | Cycles focus backward, trapped within the panel. |
| Enter / Space | Activates the focused control. |
- Built on Radix Dialog: role=dialog with aria-modal, focus trapped and restored on close.
- A Sheet.Title is required to label the panel; Description describes it.
- The close × is keyboard-reachable and labelled; the backdrop dims and inerts the page.
- Content outside the sheet is hidden from assistive tech while it's open.
Sheet.Content props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | |
className | string | — | |
showClose | boolean | true | Render a top-right 32px ghost × close button. |
size | enum | md | Panel width. sm 360 / md 480 / lg 640. |
style | CSSProperties | — |