Sheet os-012

Also known as: slide-out, drawer, side panel

A panel that slides in from the edge of the screen for filters, a cart, or a short form — the page behind dims, then you finish and close. Not a centred pop-up.

Example

this delivery — Meadow Farm Thursday box

Thursday box · 25 Sep

Family share for the River lane drop. Unaltered greens packed on top — change leave place or add a porch note before the van leaves.

Rainbow chard, carrots, eggs (6)
Leave today: side porch
Driver window: 07:30–11:00

In the box: rainbow chard, bunched carrots, six eggs. Unaltered — not cooked or added to.

Leave place

Delivery day

Porch note

Variants

right (default)

Desktop filters and carts attach to the right edge.

bottom

Phone-friendly drawer with rounded top corners.

left / top

Mirror edges when the layout needs them — same chrome, different slide.

How it works

Layout: A dimmed backdrop covers the page. The panel parks on one edge — right, left, bottom, or top — with quiet rounded corners on the open side. Header, scrollable body, optional footer stack top to bottom.

Interaction: Open from a button. Close with the ×, Escape, or a click on the dimmed backdrop. Focus moves into the panel and stays trapped until close, then returns to the button that opened it. Body scroll locks while open.

Motion: A quiet slide and fade on the shared base transition — no spring, no scale. If the person prefers reduced motion, the panel simply appears and disappears.

Content: Short farm-shop jobs fit well: filter lists, “this delivery” detail, a small edit form. Keep one primary action in the footer. Do not paint the chrome with brand green decoration.

Relationships

Use Lightbox when the overlay should sit in the centre of the screen. Site-header already owns the marketing mobile nav drawer — do not fork Sheet for that. Pair form fields (and Select) inside the body; footer actions follow the Button contract.

Parameters

Name	Type	Default	Description
`open`	boolean	`false`	Controlled open state
`side`	string	`right`	`right` \| `left` \| `bottom` \| `top`
`size`	string	`md`	`md` \| `lg` (left/right width)
`title`	string	—	Required heading
`description`	string	—	Optional supporting line
`footer`	node	—	Optional actions; one primary max

Tokens

--font-primary --color-bg --color-text --color-text-secondary --color-text-inverse --color-border --color-border-focus --color-bg-muted --color-cta --color-cta-hover --overlay-backdrop --z-modal --radius-md --radius-lg --shadow-lg --spacing-2 --spacing-3 --spacing-4 --spacing-5 --spacing-6 --transition-base --text-sm --text-lg

Provenance

Item	Detail
Inspiration	21st.dev / shadcn Sheet pattern (principles only — not a dump)
Scout approved	Phil Parry, 2026-09-22
Maturity	experimental
Binding	`components/sheet/sheet.css` + `components/sheet/react/Sheet.tsx`

Code

os-012 · Source: components/sheet/sheet.css ▾

<div class="og-sheet-backdrop" data-open="true">
  <div class="og-sheet og-sheet--right og-sheet--md" role="dialog"
       aria-modal="true" aria-labelledby="sheet-title">
    <header class="og-sheet__header">…</header>
    <div class="og-sheet__body">…</div>
    <footer class="og-sheet__footer">…</footer>
  </div>
</div>