cooper corbett

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.

primitive catalogue

alert
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/alert.tsx
package export@packages/ui/components/alert

states: default, destructive

accessibility: role and aria semantics come from Alert structure

usage: Callouts, errors, warnings, and route boundary messages.

alert-dialog
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/alert-dialog.tsx
package export@packages/ui/components/alert-dialog

states: closed, open, cancel, action

accessibility: dialog title, description, focus return, Escape close

usage: Destructive confirmations and irreversible command review.

badge
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/badge.tsx
package export@packages/ui/components/badge

states: default, secondary, outline, destructive

accessibility: text label remains visible; never color-only status

usage: Inline status, category, and metadata labels.

breadcrumb
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/breadcrumb.tsx
package export@packages/ui/components/breadcrumb

states: link, current, separator, app-owned link class

accessibility: labelled nav landmark, ordered list, aria-current page, decorative separators

usage: Route orientation trails where apps own TanStack Link and routes own item order.

button
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/button.tsx
package export@packages/ui/components/button

states: default, secondary, outline, ghost, link, disabled

accessibility: native button semantics with focus-visible ring

usage: Every command button and custom trigger base.

combobox
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/combobox.tsx
package export@packages/ui/components/combobox

states: closed, open, filtered, empty

accessibility: labelled input owns active option and empty state

usage: Search-as-you-type selection where filtering matters.

date-mono
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/date-mono.tsx
package export@packages/ui/components/date-mono

states: muted, subtle, strong

accessibility: renders time with dateTime

usage: Single date rendering primitive for posts and metadata.

dropdown-menu
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/dropdown-menu.tsx
package export@packages/ui/components/dropdown-menu

states: closed, open, highlighted, disabled

accessibility: menu roles, keyboard navigation, Escape focus return

usage: Small command menus and selection-like action lists.

empty
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/empty.tsx
package export@packages/ui/components/empty

states: empty, empty with action

accessibility: announces empty content through normal document flow

usage: No-results, 404, missing data, and loading fallback endpoints.

field
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/field.tsx
package export@packages/ui/components/field

states: default, invalid, disabled

accessibility: label, description, and invalid state stay adjacent

usage: Form field rhythm around inputs, textareas, and selects.

input
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/input.tsx
package export@packages/ui/components/input

states: default, focus, invalid, disabled

accessibility: inherits native input semantics

usage: Single-line text entry.

input-group
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/input-group.tsx
package export@packages/ui/components/input-group

states: inline start/end, block start/end, action button

accessibility: role group keeps addons and control connected

usage: Inputs with prefix, suffix, keyboard hints, or local command.

label
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/label.tsx
package export@packages/ui/components/label

states: default, disabled via parent group

accessibility: native label; caller supplies htmlFor or wraps control

usage: Standalone form labels when Field is too heavy.

select
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/select.tsx
package export@packages/ui/components/select

states: closed, open, selected, disabled

accessibility: keyboard selection with visible trigger value

usage: Bounded option sets where filtering is unnecessary.

separator
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/separator.tsx
package export@packages/ui/components/separator

states: horizontal

accessibility: decorative separator hidden from focus order

usage: Section breaks and card internals instead of border divs.

textarea
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/textarea.tsx
package export@packages/ui/components/textarea

states: default, focus, invalid, disabled

accessibility: textarea owns native multiline semantics

usage: Multiline text entry.

typography
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/typography.tsx
package export@packages/ui/components/typography

states: Heading levels 1-6, text roles, code/span/kbd elements, foreground/muted/subtle/beacon/destructive tones

accessibility: Heading level selects native h1-h6; text and code use native elements without ARIA-only semantics

usage: Canonical Heading, Text, and CodeText primitives for visible text roles.

theme-toggle
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/theme-toggle.tsx
package export@packages/ui/components/theme-toggle

states: light, dark, system

accessibility: native select has a deterministic accessible label

usage: Compact native light, dark, and system selector.

tooltip
primitive / @packages/ui
canonical
source pathpackages/ui/src/components/tooltip.tsx
package export@packages/ui/components/tooltip

states: closed, open, delayed

accessibility: hover and focus disclosure for short hints

usage: Short labels for icon-only or dense controls.

code-block
primitive / @packages/ui
mdx-only
source pathpackages/ui/src/mdx/code-block.tsx
package export@packages/ui/mdx/code-block

states: static, copy idle, copy success

accessibility: figure caption and copy button label

usage: MDX code figures and pre overrides in posts.

picture
primitive / @packages/ui
mdx-only
source pathpackages/ui/src/mdx/picture.tsx
package export@packages/ui/mdx/picture

states: image, image with caption

accessibility: alt text is mandatory; caption is optional

usage: MDX images until responsive sources land.

composite catalogue

metadata-row
composite / @packages/ui
canonical
source pathpackages/ui/src/components/metadata-row.tsx
package export@packages/ui/components/metadata-row

states: responsive, inline, stack; foreground, muted, subtle tones

accessibility: description-list semantics preserve term and value pairs

usage: Compact route, post, and project metadata rows.

route-error-block
composite / @packages/ui
canonical
source pathpackages/ui/src/components/route-error-block.tsx
package export@packages/ui/components/route-error-block

states: default, destructive, with action slot

accessibility: role alert from Alert; route supplies action semantics

usage: Presentational route error UI while TanStack retry commands remain in the route.

card
composite / @packages/ui
canonical
source pathpackages/ui/src/components/card.tsx
package export@packages/ui/components/card

states: default, with footer actions

accessibility: heading and description hierarchy stays inside card

usage: Repeated content surfaces and component examples.

surface
composite / @packages/ui
canonical
source pathpackages/ui/src/components/surface.tsx
package export@packages/ui/components/surface

states: tone: canvas | base | raised | inset | overlay | feature; texture: none | paper

accessibility: paper texture is decorative, stays behind content, and is suppressed for print and stronger-contrast modes

usage: Semantic planes composed high in routes; paper is limited to documented feature specimens.

wordmark
composite / @packages/ui
canonical
source pathpackages/ui/src/components/wordmark.tsx
package export@packages/ui/components/wordmark

states: header, footer

accessibility: text identity; not a navigation landmark

usage: Site identity in header, footer, and design specimens.

default-catch-boundary
composite / apps/web
app-only
source pathapps/web/src/components/default-catch-boundary.tsx
package exportnone

states: caught error, reset command

accessibility: composed page fallback keeps user action explicit

usage: Route error leaves own fallback messaging and reset command.

non-display: App-only route boundary; represented here by Alert plus Button examples.

not-found
composite / apps/web
app-only
source pathapps/web/src/components/not-found.tsx
package exportnone

states: missing route

accessibility: composed empty page keeps heading and recovery action

usage: 404 leaf owns its fallback copy and navigation command.

non-display: App-only route boundary; represented here by the Empty primitive.

layout catalogue

index-feed
layout / @packages/ui
canonical
source pathpackages/ui/src/components/index-feed.tsx
package export@packages/ui/components/index-feed

states: default, compact, date/body/title/description slots

accessibility: ul/li semantics preserve chronological list structure

usage: Chronological writing, activity, and work feeds before route-local list scaffolding.

page
layout / @packages/ui
canonical
source pathpackages/ui/src/components/page.tsx
package export@packages/ui/components/page

states: shell width, shell rhythm, header layout, section rhythm

accessibility: main, header, section, and article semantics

usage: PageShell, PageHeader, PageSection, and ProsePage for route-high layout composition.

examples

component examples

Primitive and composite examples exercise the exported package components before route-local markup is considered.

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-sizepackages/ui/src/components/typography.tsxcmd k
@packages/ui/components/typography
actions and status
Button and Badge variants provide the action and status base.
defaultsecondaryoutlinedestructive
@packages/ui/components/card
form controls
Field primitives own label, description, and validation rhythm.

Inputs stay square, dense, and tokenized.

cmd k
breadcrumb navigation
Breadcrumbs expose route hierarchy while links remain app owned.

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.
@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.

theme-toggleNative light, dark, and system select.
mdx primitives
CodeBlock and Picture render post-owned content with package primitives.
component.tsx
<Button variant="outline">inspect</Button>
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
@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/surfacesurfaceVariantstone="feature" texture="paper"

surfaces

surface primitive

Surface applies documented semantic planes. It exposes CVA-owned tone and texture inputs without owning route structure or content.

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.

--surface-canvasflat page canvas; no texturevar(--surface-canvas)
--surface-baseordinary content plane; no texturevar(--surface-base)
--surface-raisedstandalone panel; no texturevar(--surface-raised)
--surface-insetcontained secondary plane; no texturevar(--surface-inset)
--surface-overlayfloating interactive plane; no texturevar(--surface-overlay)
--surface-featurerare editorial plane; paper texture allowedvar(--surface-feature)