# Components The relevant shared UI primitives rendered as a catalogue. Compose these before adding route-local UI. flat page canvas; no texture ordinary content plane; no texture standalone panel; no texture contained secondary plane; no texture floating interactive plane; no texture rare editorial plane; paper texture allowed role and aria semantics come from Alert structure default, destructive Callouts, errors, warnings, and route boundary messages. dialog title, description, focus return, Escape close closed, open, cancel, action Destructive confirmations and irreversible command review. text label remains visible; never color-only status default, secondary, outline, destructive Inline status, category, and metadata labels. labelled nav landmark, ordered list, aria-current page, decorative separators link, current, separator, app-owned link class Route orientation trails where apps own TanStack Link and routes own item order. native button semantics with focus-visible ring default, secondary, outline, ghost, link, disabled Every command button and custom trigger base. labelled input owns active option and empty state closed, open, filtered, empty Search-as-you-type selection where filtering matters. renders time with dateTime muted, subtle, strong Single date rendering primitive for posts and metadata. menu roles, keyboard navigation, Escape focus return closed, open, highlighted, disabled Small command menus and selection-like action lists. announces empty content through normal document flow empty, empty with action No-results, 404, missing data, and loading fallback endpoints. label, description, and invalid state stay adjacent default, invalid, disabled Form field rhythm around inputs, textareas, and selects. inherits native input semantics default, focus, invalid, disabled Single-line text entry. role group keeps addons and control connected inline start/end, block start/end, action button Inputs with prefix, suffix, keyboard hints, or local command. ul/li semantics preserve chronological list structure default, compact, date/body/title/description slots Chronological writing, activity, and work feeds before route-local list scaffolding. native label; caller supplies htmlFor or wraps control default, disabled via parent group Standalone form labels when Field is too heavy. description-list semantics preserve term and value pairs responsive, inline, stack; foreground, muted, subtle tones Compact route, post, and project metadata rows. main, header, section, and article semantics shell width, shell rhythm, header layout, section rhythm PageShell, PageHeader, PageSection, and ProsePage for route-high layout composition. role alert from Alert; route supplies action semantics default, destructive, with action slot Presentational route error UI while TanStack retry commands remain in the route. keyboard selection with visible trigger value closed, open, selected, disabled Bounded option sets where filtering is unnecessary. decorative separator hidden from focus order horizontal Section breaks and card internals instead of border divs. textarea owns native multiline semantics default, focus, invalid, disabled Multiline text entry. Heading level selects native h1-h6; text and code use native elements without ARIA-only semantics Heading levels 1-6, text roles, code/span/kbd elements, foreground/muted/subtle/beacon/destructive tones Canonical Heading, Text, and CodeText primitives for visible text roles. native select has a deterministic accessible label light, dark, system Compact native light, dark, and system selector. hover and focus disclosure for short hints closed, open, delayed Short labels for icon-only or dense controls. figure caption and copy button label static, copy idle, copy success MDX code figures and pre overrides in posts. alt text is mandatory; caption is optional image, image with caption MDX images until responsive sources land. heading and description hierarchy stays inside card default, with footer actions Repeated content surfaces and component examples. paper texture is decorative, stays behind content, and is suppressed for print and stronger-contrast modes tone: canvas | base | raised | inset | overlay | feature; texture: none | paper Semantic planes composed high in routes; paper is limited to documented feature specimens. text identity; not a navigation landmark header, footer Site identity in header, footer, and design specimens. composed page fallback keeps user action explicit App-only route boundary; represented here by Alert plus Button examples. caught error, reset command Route error leaves own fallback messaging and reset command. composed empty page keeps heading and recovery action App-only route boundary; represented here by the Empty primitive. missing route 404 leaf owns its fallback copy and navigation command. loading skeleton announces status, decorative blocks stay hidden, and loaded MDX keeps its source semantics App-only content-loader boundary; the post route capture shows loaded content and browser tests cover the skeleton. loaded MDX, loading skeleton Post routes load compiled MDX while keeping a token-backed, announced fallback beside the owning Suspense boundary. inherits native Button naming, focus, disabled, and command semantics App-only router command wrapper; represented by the package Button while browser tests prove invalidation. default, disabled, route invalidation Shared retry command for route loader and error branches without duplicating router invalidation in each route. A drafting-board interface with visible construction. The sans face carries prose and headings. The mono face is reserved for dates, labels, code, numerals, and the site identity. v0.1.0 \--font-mono Aa composite token anatomy Typography roles are composite tokens: each role binds family, size, line-height, weight, and tracking while tone stays separate. responsive specimen A deliberately long route title that has to wrap without touching the next line of copy. page-title / narrow frame / balanced wrap dense example Compact catalogue text stays legible at control density. mono-label + body-small + caption long code stress \--type-page-title-letter-spacing remains readable beside captions, labels, and dense metadata. caption mono code tone="canvas" Flat page canvas. This role establishes the quiet background and never receives texture. tone="base" Ordinary content plane for unframed route sections. It remains quiet in both themes. tone="raised" Standalone panel with a tonal step and hairline boundary, without decorative texture. tone="inset" Contained secondary plane for dense metadata, code, and secondary information. tone="overlay" Opaque interactive plane for menus, dialogs, and other floating UI. Texture is not allowed. tone="feature" texture="paper" Rare editorial plane. Paper is a decorative layer behind content, removed for print and stronger-contrast modes. primitive token semantic alias reference \--bg quiet page canvas \--bg-elevated raised panels and cards \--bg-sunken code, loading, inset states signal material The field prints in one place only: a framed plate, a keyline and a paper gap around a night ground. It is a 4 x 4 ordered dither on 2 CSS px cells with four ink levels. A plate is tuned to a frequency taken from its route, so the same page always prints the same plate, and a new frequency retunes it in four dither steps. It drifts for eight seconds after arriving or retuning, then holds a still frame. The page around it is flat paper: nothing prints behind text. threshold order / source path package export states: accessibility: usage: non-display: primitive catalogue composite catalogue layout catalogue primitive examples typography primitives Heading, Text, and CodeText expose the canonical role layer. Semantic section title with native heading level Role controls family, size, line-height, weight, and tracking. Tone stays separate and resolves through semantic color tokens. Section title Dense descriptions use the same primitive instead of local text utility piles. \--type-body-font-size packages/ui/src/components/typography.tsx cmd k @packages/ui/components/typography actions and status Button and Badge variants provide the action and status base. default secondary outline ghost link default secondary outline destructive @packages/ui/components/card inspect form controls Field primitives own label, description, and validation rhythm. name cooper corbett Inputs stay square, dense, and tokenized. notes Pattern usage, component behavior, and token rationale. standalone label search component leaves cmd k filter tokens run semantic split Beacon carries interaction. Ember carries editorial emphasis. They should not decorate the same element. breadcrumb navigation Breadcrumbs expose route hierarchy while links remain app owned. home design components Use the native link primitive for plain anchors. Route modules can apply the same link class to TanStack Link so navigation remains app-owned. @packages/ui/components/breadcrumb overlay primitives Popup surfaces use the shared opaque overlay contract. menu inspect copy token archive Overlay primitive level primitive composite layout tooltip opaque popover surface Find primitive find primitive no primitive button menu Selected primitives alert dialog overlay contract Dialog content uses the same opaque popover plane as menus. cancel confirm @packages/ui overlay primitives empty and theme leaves Leaves own fallback content, commands, and local interaction state. no matching components Empty states are primitives with their own copy and recovery slot. clear filters theme-toggle Native light, dark, and system select. mdx primitives CodeBlock and Picture render post-owned content with package primitives. component.tsx picture primitive Isometric grid pattern sample MDX image wrapper with mandatory alt text. layout primitives Page, feed, metadata, and route error primitives stay presentational while routes own data and commands. layout Route-composed section PageHeader supplies the shell. The route supplies the visible text, loader data, and leaves. Feed and metadata slots Composable layouts Feed rows expose slots without knowing about posts. owner @packages/ui route work loader data and retry commands Recoverable route state Routes match the error and pass actions into this slot. retry @packages/ui/components/page @packages/ui/components/index-feed composite examples card composition Header, content, and footer keep repeated surfaces consistent. Cards are composites that combine typography, spacing, borders, and action slots without route-local styling. @packages/ui/components/card feature surface Surface exports CVA-backed tone and texture axes. Paper is decorative, behind readable content, and restricted to documented feature specimens. @packages/ui/components/surface surfaceVariants tone="feature" texture="paper" Components The relevant @packages/ui primitives rendered as a catalogue. Compose these before adding route-local UI. components component library Reusable primitives come from @packages/ui. This route composes them rather than forking a separate design system. examples component examples Primitive and composite examples exercise the exported package components before route-local markup is considered. surfaces surface primitive Surface applies documented semantic planes. It exposes CVA-owned tone and texture inputs without owning route structure or content. home design components cooper corbett Copy code Copied Code copied to the clipboard. Code could not be copied. Try again. \