Kitchen sink every component on one page
Summary
One page with one of everything: the post-change smoke test.
After any CSS or token change, open this page, flip theme,
density and direction with the corner buttons (bottom-right),
and verify the whole library in one scroll: if a change broke a
component visually, it shows up here first. Also the capture
target for visual regression. Each section title links to that
component's docs page. This page is just the parade, not the
documentation: the component matrix lives on the
overview and the API contract in the
reference. Even this
paragraph parades something: inline code sits on
the inset surface in every theme.
Page header & page panel
A mini document: structured title block, panel cells, then footer small print.
Project X LIVE
Production workloads for the US East region.
The page panel: one document surface with optional nav and sidebar cells, hairline dividers between.
Buttons & dropdown
Every variant, the joined button group, and a live menu trigger.
Badges, labels, chips, avatars
Status pills, tag chips, pressed filters, and the avatar scale (initials or image).
Progress, spinner, skeleton, meter
A determinate bar, busy indicators, loading placeholders, and a thresholded meter.
Messages & banners
Inline feedback tints, then page-level banners. The info message and the warning banner close on their ×.
Info
The info tint — closeable, auto-init wires the ×.
Saved
Your changes are live.
Build failed
Step “test” exited with code 1.
Forms, select, date picker
Fields, controls, and validation — the select, the date inputs, the stepper, and the auto-growing textarea are live.
There is a problem
Tabs, accordion, list group
Combobox & dropzone
Free-text autocomplete over a plain input (type “team”) and a drag-and-drop zone over a visible file input (auto-init; the prompt is generated from the locale catalog).
Key-value list
One entity's facts as a semantic dl. The
label column hugs its widest label; values compose
badges, code and links.
- Service
nware-portal- Region
- us-east
- Status
- healthy
- Owner
- platform-team
- Last deployed
- 2026-07-30 14:12 UTC
Table
Sortable headers, the zebra + interactive variants on a compact second table, then a pinned header inside a height-capped scroll region.
| Service | Instances | Status |
|---|---|---|
| nware-portal | 12 | healthy |
| cortex-gateway | 2 | degraded |
| soma-cdn | 8 | failing |
| Region | Latency |
|---|---|
| us-east | 28 ms |
| us-east | 96 ms |
| ap-south | 142 ms |
| Deployment | State |
|---|---|
| portal-web-7f2 | Running |
| cortex-api-1b9 | Running |
| soma-cdn-e04 | Rolling out |
| metrics-agg-55c | Running |
| audit-log-c11 | Running |
Toolbar & RESTful table
An action row over a live CRUD table — the table talks to an in-page fetch stub, so add, edit and delete really work.
Devices
Stats, charts, log viewer, diff
A KPI tile, a chart container with legend, then log and diff panes.
- Requests
- Cache hits
Dialogs, palette, tooltips, inline dialog, navigation
Overlay triggers, then breadcrumbs (plain and collapsed), pagination, and wizard steps.
Tree
Branches toggle on click, and the whole tree is one tab stop: arrows walk the visible items, Enter/Space toggle (WAI-ARIA tree pattern); auto-init.
-
prod-web
-
api-backend running
-
postgres-db
-
-
README.md
Sidebar nav groups
Collapsible sidebar sections, auto-init: an open group's toggle lifts to full ink with a tree guide, and the group holding the current page keeps its toggle in primary.
Timeline
Colored markers on the rail; the rail drops after the last item.
-
Deploy complete Tue 14:02
api-backend v2.3.1 rolled out to us-east.
-
Settings changed Tue 11:40
Region pinned to us-east.
-
Scan failed Mon 02:00
The nightly scan did not complete.
Quicksearch
Soma owns the mechanics; the page renders results on the search event — try “da” or “set”.
Drawer & toasts
The drawer is non-modal: open it, then click the counter — the click still lands, and being outside it also closes the drawer. The toast stacks top-right and closes on its ×.
Icons
Mask-image glyphs colored by currentColor —
the 16px default and the large size.
Keyboard shortcuts
A key-sequence registry with no chrome of its own. This page registers one binding: press ? anywhere outside a field and a toast confirms it fired.
Navbar
Every slot: app switcher (before), brand, global nav with
a dropdown item, and the end-aligned secondary cluster —
the transparent default, then the branded
soma-navbar-primary strip.
Empty state
The zero-data view that points at the next step.
No findings yet
Run your first scan to populate this view.