App-level composites built from kit primitives, each proven on a shipping
screen and mirrored in the playground's patterns section (/patterns on the
gallery) on fixture data with pullable source. The gallery page is the deep
explanation; this catalog exists so a docs-first search still lands (ruling
D8: every pattern the gallery shows is entered in the docs).
Per doc 44's worthiness bar, a pattern page needs shipping-screen usage (cited on the page), two or more kit pieces or a ruled convention, and an owner naming or a twice-recurrence. Nothing here is a kit component; the D7 promotion candidates are tracked as board items.
Each pattern page carries provenance lines naming the mirrored app file and line range, and an app-specific note stating what the fixture composite deliberately leaves out. The printed source is pullable by construction: it derives from the same module the page renders.
The table#
The table below is generated from the playground's showcase registry by
node scripts/kit-inventory.mjs, grouped by the question a section answers
and then by the screen shape the registry files each pattern under. Do not
edit between the markers; edit the registry entry and regenerate.
node scripts/kit-inventory.mjs --check fails when the table is stale, which
is how it stays current where a hand-kept one fell fourteen rows behind.
To find a pattern by what the owner asked for, start from
docs/common-requests.md. To search all of it, run npx kit-inventory --find
with the noun.
Layout and navigation#
Dashboards. Headline numbers and split layouts for overview pages.
| Pattern | Route | Use it for |
|---|---|---|
| Dashboard stat groups | /patterns/dashboard-stats | headline numbers as stat tiles, auto-fit grid |
| Split cards | /patterns/split-cards | two-pane split, hairline row dividers |
| Entrance cards | /patterns/entrance-cards | one small card per destination, a sentence of purpose, the arrow in the toolbar |
Structure. Page headers, sidebars, and title composites.
| Pattern | Route | Use it for |
|---|---|---|
| Page title variants | /patterns/page-title-variants | plain icon, themed chip, title-side status pill |
| Job title composite | /patterns/job-title | mono run suffix, id copy affordance, status pill (D6, fresh) |
| Sidebar anatomy | /patterns/sidebar-anatomy | grouped rail, known-only counts, identity footer |
Loading. Skeletons matched to the shape and route they stand in for.
| Pattern | Route | Use it for |
|---|---|---|
| Shape-matched skeleton | /patterns/shape-matched-skeleton | page and placeholder share one container map |
| Route-matched boot skeletons | /patterns/boot-skeletons | the boot frame dispatches on pathname |
Overlays. Drawers, panels, and dialogs layered over the page.
| Pattern | Route | Use it for |
|---|---|---|
| Claimable peek panel | /patterns/peek-panel | one drawer slot, claim-and-evict semantics |
| Confirm-and-report action | /patterns/confirm-and-report | close-then-toast: the dialog is gone before the request settles |
| Clean modal | /patterns/clean-modal | no divider by default, coloured footer actions, sectioned body |
Typography. Composites where two or more type roles meet on one shipping screen.
| Pattern | Route | Use it for |
|---|---|---|
| Typography composites | /patterns/typography-composites | title stacks, label and value grids, identity rows, message text |
Workflows and activity#
Workflows. Progress and stage indication for multi-step jobs.
| Pattern | Route | Use it for |
|---|---|---|
| Workflow stepper | /patterns/workflow-stepper | numbered knobs, completion-colored connectors |
| Top loading bar | /patterns/top-loading-bar | 90ms grace, eased trickle, completes on arrival |
Activity. Timestamped feeds of what happened lately, capped and grouped.
| Pattern | Route | Use it for |
|---|---|---|
| Recent activity feed card | /patterns/recent-activity-feed | tone dots, day groups, connector line, load more |
Forms and entry#
Forms. Upload and entry composites proven on shipping screens.
| Pattern | Route | Use it for |
|---|---|---|
| Compact dropzone card | /patterns/compact-dropzone | the dashed row on a borderless surface, files beneath |
| Searchable attach list | /patterns/searchable-attach-list | search Input, running count, checkbox rows, scoped Attach |
Module settings. The four V1 console modules rendered from their schemas by SchemaForm, with the app's slots stubbed.
| Pattern | Route | Use it for |
|---|---|---|
| Module settings: content generation | /patterns/module-content-generation | fields table with prompt and rules in the row, templates as presets, preview beside |
| Module settings: image generation | /patterns/module-image-generation | generate or edit as mode cards, colour swatches, compact dropzone, a warning status line |
| Module settings: attribute normalization | /patterns/module-attribute-normalization | rows seeded from the file, a fetched multiselect per row, coverage hints |
| Module settings: part type matching | /patterns/module-part-type-matching | the smallest module: a checklist with sample hints, an admin-only field, a match preview |
Bulk actions. Selection-driven toolbars that grow under a table once rows are picked.
| Pattern | Route | Use it for |
|---|---|---|
| Bulk selection action bar | /patterns/bulk-selection-bar | live count in the bar, action label carries the count |
Data and access#
Auth and access. Signed-out shells, the account menu, and who holds which role.
| Pattern | Route | Use it for |
|---|---|---|
| Auth card shell | /patterns/auth-card-shell | centered card shell every signed-out screen wraps in |
| Account menu | /patterns/account-menu | identity trigger, workspace line, colorless sign out |
| Member row with inline role control | /patterns/member-row-inline-role | role Select, remove behind confirm, pending invite state |
Data. Identity and file tokens that open a preview, and labeled data grids.
| Pattern | Route | Use it for |
|---|---|---|
| Part identity trigger | /patterns/part-identity | icon-led preview button, mono SKU peek link |
| File chip | /patterns/file-chip | mid-truncated filename token, opens a preview |
| Attribute / spec grid | /patterns/attribute-spec-grid | labeled dl grid, mono keys, critical + provenance rows |
| Row actions | /patterns/row-actions | icon buttons for the common case, a kebab for the rest, one shared modal |