A sheet enters from the right edge, full height, with a
1px left border and a shadow-2xl. Nothing enters from the bottom, left or top.
A sheet’s width is a viewport fraction — 50vw, 58vw or
70vw — which is what separates it from a drawer, the fixed
480px panel. Two forms ship: a viewer that opens over the page, and an expand-in-place
panel that is an inline card until you expand it.
Viewer sheet
Opens a single record over the page — a note, a document, a statement. The header is a breadcrumb plus icon actions; the scrim is a click-to-close strip on the sheet’s left.
Expand in place
The same block is an inline card by default and a 70vw sheet when
expanded — one component, two layouts, toggled by the icon in its header. The icon turns
#A855F7 while expanded.
Agency Information
rounded-2xl card with padding 24px and a
1px border, sitting in the flow with the rest of the page.70vw sheetAgency Information
rgba(0,0,0,.35) scrim covers the whole page beneath it.Specs
| Part | Value |
|---|---|
| Position | fixed · inset-y-0 right-0 — always the right edge, always full height |
| Surface | #fff · border-left 1px #E5E7EB · shadow-2xl · no radius |
| Header | padding 12px 24px · border-bottom 1px · background rgba(249,250,251,.80) · flex-shrink 0 |
| Breadcrumb | 14px leading icon · 11px muted segments · 12px chevrons · title 12px / 600, max-width 420px, truncated |
| Header actions | gap 2px · buttons padding 6px · radius 6px · 14px icons · muted, hover adds #F9FAFB and darkens to #1F2937 |
| Status tag | 10px / 700 uppercase · letter-spacing .04em · padding 2px 6px · Archived #F59E0B on 10% tint, In Trash #EF4444 on 10% tint |
Widths and scrims
| Use | Width | Scrim | z-index |
|---|---|---|---|
| Document viewer | 50vw, min-width 480px | Strip inside the sheet box, rgba(0,0,0,.25) | 60 |
| Note / document / statement detail | 58vw | Strip inside the sheet box, rgba(0,0,0,.25) | 50 |
| Agency Information, ITC Record | 70vw | Separate full-screen layer, rgba(0,0,0,.35) | 50 over a 40 scrim |
The two forms scrim differently. A viewer puts the scrim inside its own fixed box as a flex-1 sibling, so only the strip beside the sheet is dimmed and clickable. An expand-in-place panel uses a separate fixed inset-0 layer at z-40, dimming the whole page. |
A sheet’s width is always vw; the one pixel value here is a min-width. A panel with a fixed width is a drawer — different element, different shadow, different header. |
| Expand-in-place is not a resize: it is two fixed layouts. See Resizable. |
| Nothing enters from the bottom, left or top — checked across the whole app. A centred overlay is a dialog, not a sheet. |