Containers
The container surfaces — framed regions you put other content INSIDE. Each one is a thin composition over the <Surface> primitive (Sheet additionally wraps the @phauna/ds Drawer), so elevation, padding, radius, tone and the inset well all come from one place and re-skin with the theme. Flip the theme in the top bar to confirm every surface tracks it.
- Panel
- A titled container = Surface (raised by default) with optional header (title · description · actions), body, and footer slots divided by hairline rules. Pass an id and the title becomes the region's accessible name.
- Well
- A recessed surface = Surface inset. Swaps the drop-shadow for a carved-in well (surface-2 floor + inner shadow) for nesting content one layer down — a quote, a code block, a read-only summary.
- Tile
- A compact, square-ish interactive surface for a grid of equal-weight choices — a launcher / nav cell or a small stat. Renders a real <a> (with href) or <button>, so it's focusable and the interactive ring paints; selected marks the active cell.
- Sheet
- A controlled side slide-over over the Drawer overlay — side left/right, size sm/md/lg, with header (title · description · close), scrollable body, and footer slots. Distinct from a BottomSheet (which docks to the bottom edge).
- GroupBox
- A real <fieldset> + <legend> (Surface tone surface-2) — a labeled enclosure for related controls. Screen readers announce the legend as the group name and a disabled fieldset cascades to its controls.
Panel
A titled region. Header carries the title + description on the left and an actions slot on the right; the body holds the content; the optional footer is divided off below. Surface variants (elevation, tone, radius) pass straight through — the right tile shows a flat, inset-bodied variant.
Your teams
Communities you've joined.
The body is its own gutter region, so the header rule and footer rule read edge-to-edge. Drop any content here.
Settings section
A flat panel, no lift.
elevation="flat" + tone="surface-2" — a quiet grouping for a settings page, no footer.
Well
A recessed surface for nesting content one layer down. The inset modifier replaces the drop-shadow with a carved-in well (a surface-2 floor + inner shadow). Here a Well sits inside a Panel body to set off a quote and a code sample.
Submission
Read-only preview
“I can foster two dogs starting next weekend and have a fenced yard.”
{ "capacity": 2, "fencedYard": true }Tile
Compact, equal-weight cells for a launcher or a stat strip. As links (below) each Tile is an <a> with an icon, an optional large value, and a label; the third cell is marked selected (aria-current). The interactive, selectable button variant is in the live demo at the bottom.
GroupBox
A real fieldset + legend (tone surface-2) — a labeled enclosure for related controls. The legend names the group for assistive tech; the disabled variant on the right cascades to every control inside the fieldset.
Sheet
A controlled side slide-over over the Drawer overlay. Open it from either edge; it traps focus, dismisses on Esc / backdrop, and restores focus on close. Below it, the Tile launcher grid shows the interactive, single-select button variant.
Selected: teams