Generated from chemistry/components

Component Atlas

The sidebar is the catalog surface now. This page summarizes the generated UI contract set: live specimens, state vocabulary, accessibility notes, and token-backed styling.

Showroom ready
211
Generated pages
Platform adopted
0
Elements and panels
Live renderers
213
0 static fallbacks
Category pages
16
Generated routes

Implementation gates

Showroom first, platform next.

The catalog has two generated readiness gates: the `/components` showroom must represent every component, and the platform gate tracks whether real Triform surfaces consume those components.

The generated atlas route setShowroom
211/21399%

Every component is present in `/components/*` category pages.

Real elements and panelsPlatform
0/2130%

Adoption rises when production surfaces compose the catalog components.

The contract loop

Every visual decision has a typed origin.

Components are not copied from screenshots. The YAML contract declares intent, props, examples, accessibility, and tokens; the generator turns that into docs and live previews.

IntentWhat this primitive is allowed to do
PropsStable shape for generated view specs
StateConsistent readiness and interaction language
A11yKeyboard and screen-reader expectations
TokensColor, type, radius, motion, and spacing
ExamplesLive ViewEngine specimens from YAML

Live specimens

The library showing its own work.

These previews are generated from the same examples that power each component contract page.

button

The action primitive that keeps command hierarchy sharp, accessible, and token-driven.

Open contract

chromeless-miniature

The miniature IS the panel — same ui-browser-* shapes, Miniature scale, View Transition morphs between them.

Open contract

card

The canonical content surface: calm grouping, stable chrome, and predictable density.

Acme Onboarding

Last activity 2h ago

12 elements · 4 agents · 1 active flow
Open contract

code-block

One stable code surface — mono type, overflow, language label — for every snippet.

bash
cargo run -p triform-server --features ssr-frontend
Open contract

table

Honest tabular data — native semantics, zebra rows, no fake sort affordances.

Element categories
CategoryElements
actionspython, rust-fn, go-fn
datasql, vector, graph
iohttp, slack, email
Open contract

sheet

Edge-anchored overlay: the one Drawer shape, with a motion-safe slide and dismiss contract.

Open contract

Browse the atlas

Public categories, generated from catalog health.

Only categories with implemented or partial components are promoted to the public route list.

LayoutStack, Grid, Container, Section, PageHeaderComplete12/12 completeSurfacesCard, PanelShell, ModalShell, Workspace and editor shellsComplete41/41 completeWorkbenchBrowser panel, terminal, board, chat — per-element working surfacesComplete12/12 complete · 1 partialWorkspace ChromeTop bar, library rail, canvas, props rail, status bar — the workspace L-chrome regionsComplete6/6 completeButtonsButton, IconButton, item actions, grouped actionsComplete10/10 completeForm InputsInput, TextArea, SearchInput, picker and numeric controlsComplete14/14 completeForm StructureFormField, SchemaForm, grouped form actionsComplete6/6 completeSelectionSelect, Checkbox, Radio, Switch, FilterChipComplete15/15 completeData DisplayBadge, tables, lists, charts, media and code displayIn progress37/39 completeFeedbackSpinner, skeletons, empty states, banners and progressComplete15/15 completeOverlaysDialog, Popover, Tooltip, menus and drawersComplete10/10 completeNavigationTabs, breadcrumbs, pagination and route affordancesComplete9/9 completeDisclosureAccordion, disclosure and collapsible sectionsComplete4/4 completeFormattersBytes, duration, relative time, currency and numeric displayComplete6/6 completeElement MiniaturesPer-element-type miniature tiles for overview and selection surfacesComplete13/13 completeElement PanelsPer-element-type full interactive panels — the opened working surfaceComplete1/1 complete

Design system spine

The page is styled with the same primitives it describes.

--tf-surface-raisedsurfaces--tf-text-primarytypography--tf-ctaaction--motion-hovermotion--tf-focus-ringa11y

Honest maturity

Premium where complete, explicit where still in motion.

The atlas does not pretend every component is finished. Missing and partial contracts stay visible in generated inventory, while the public page showcases what is ready to inspire builders.

Existing
211
Implemented contracts
Partial
1
In active refinement
Missing
0
Tracked backlog

Design system gate

Approve the language here first

Components is the rehearsal room for the platform. Typography, spacing, motion, prose, accessibility, and visual states should settle here before they are promoted into workspace surfaces.

ShapeExplore the look in the atlas where every specimen is visible.
CaptureWrite down intent, tokens, spacing, states, and accessibility rules.
ProveReview examples at real densities before the primitive becomes product code.
PromoteMove approved primitives into portal surfaces without copying ad hoc CSS.

The rest of the catalog

Beyond components

Element types, production panels, and the design tokens every surface is built from — all under /components.

ElementsEvery Triform element type as a periodic table — all five representations, by category.PanelsProduction panel specifications and the harmonization scoreboard.CompositionHow agents, apps, and automations present their attachable pieces as named categories with empty slots — canvas + panel, one manifest.RelationshipsHow element categories wire together — a constellation of every category sized by its element count, the map of the whole system.Design TokensColor, spacing, typography, radius, shadow, motion — what every var(--…) resolves to.