Remix Kit

Prose

The typography tier: proseCss() carries the drafting register into flowing content — rendered markdown, release notes, long-form help. In-prose links underline at rest (the RESOLVED-50 law baked in); blockquotes wear the Callout gutter, never italics — the kit has no italic register. 65ch measure.

<div mix={proseCss()}>{renderedMarkdown}</div>

Diff block

Diffs in the drafting grammar: the CodeBlock scroll contract over add/del/ context lines, grounds on the Badge recipe (status tint + ink text — hues never carry the code), muted gutter marks, forced-colors gutter edges. parseDiff turns unified-diff text into lines. Zero JS.

 middleware: [staticFiles('./public'), render(),−  formData()],+  formData(), loadDatabase(db)],

<DiffBlock label="Change to router.ts" lines={parseDiff(unifiedText)} />

External link and mark

ExternalLink carries the leaving-the-app affordance (↗ + sr-only note) and underlines at rest — prose links must be distinguishable without color (axe caught the hover-only default on arrival). Same-tab by default; `newTab` opts in WITH rel hygiene. markCss replaces engine-yellow search highlights with the accent tint, and the live example is right there: remix docs↗(external).

<ExternalLink href="https://remix.run">Remix docs</ExternalLink>
<ExternalLink href={url} newTab>Reference</ExternalLink>  {/* + rel hygiene */}
<mark mix={markCss()}>{matchedText}</mark>

Time

Relative timestamps in the machine register: a semantic time datetime showing "2m ago" with the absolute moment on hover. Server-rendered and static by design — frames refresh times WITH the data they describe; no ticking island pretending the page is newer than its contents. formatRelativeTime is exported and boundary-tested.

just now5m ago3h ago2d ago2026-04-28

<Time value={deploy.created_at} now={now} />   {/* one `now` per page — rows agree */}

Code block

Plain mono on the quiet channel, horizontally scrollable as a keyboard- reachable NAMED region (the Table scroll contract applied to code). No syntax highlighting by design — a highlighter is a dependency and a palette outside the tokens. Zero JS; position:relative for composed CopyButtons. Every usage snippet on this page is one.

<CodeBlock code={cmd} label="Install command" lang="sh" />

CSS utilities

Progressive layout and typography recipes: truncation, line clamping, balanced/pretty wrapping, query containers, stable scrollbar gutters, logical safe-area padding, and native :user-invalid paint.

<div mix={containerCss({ name: 'card' })}>…</div>
<h2 mix={textWrapCss('balance')}>…</h2>
<p mix={lineClampCss(3)}>…</p>
<div mix={safeAreaPaddingCss({ blockEnd: '16px' })}>…</div>

Themes

Themes are ALTERNATIVES, not layers: inline exactly one of themeStylesheet (petrol) or graphiteStylesheet (neutral greys, brand cobalt-indigo accent) — every component runs unchanged because nothing outside the tokens file knows a hex. Both themes hold AA in both schemes (gate-walked, 430 text nodes each). The card below is graphite, scoped via css(graphiteTokens).

import { graphiteStylesheet } from '@kapable/remix-kit/tokens'
<style>{graphiteStylesheet}</style>  {/* INSTEAD of themeStylesheet */}

Chrome

/ Kbd chips, the section-label rule above each block, and the masthead double rule at the top of this page.

not shown here (js-wired): select popup · livepill sse — see the demo app.

Disclosure

The kit's only JS-off show/hide: native details/summary, with toggle, keyboard, and semantics browser-owned — no island, ever, and the demo gate proves it with JavaScript disabled. One-off reveals live here; coordinated sets are Accordion. This one is live — click it.

<Disclosure summary="Advanced options" defaultOpen?>
  …revealed content…
</Disclosure>

Steps

Discrete position in a known sequence (wizards, setup flows): numbered dots on connecting rules, done segments carrying accent. Zero JS — done steps link back (the server owns wizard position through the URL), the current step carries aria-current="step". Timeline is the vertical activity log; Progress is a continuous measure; this is neither.

<Steps label="Setup" current={1} steps={[
  { label: 'App', href: '/setup/app' },   // done → links back
  { label: 'Environment' },               // current (aria-current="step")
  { label: 'Review' },                     // upcoming
]} />

PageShell and CommandK

PageShell is the labeled main#main column (width narrow · md · wide) with the skip-link contract wired — the page chrome every app was hand-rolling. CommandK binds ⌘K/Ctrl+K to a CommandPalette as a kit island; kit islands mount at page level, never inside another island (nesting double-boots them — a law learned live and recorded).

<PageShell width="md">…page content…</PageShell>
<CommandK target="cmdk" />   {/* page level, like Toaster */}

SideNav

The app-frame navigation rail — pure links, zero JS: the server owns "current" through the URL and the kit stamps aria-current="page". Current wears the change-bar rule (2px accent edge, ink text — never a filled pill); group labels and counts speak the machine register. The kit ships the nav; the frame is app-owned layout (App frame composition in the skill).

<SideNav groups={[
  { items: [{ label: 'Overview', href: '/', current: pathname === '/' }] },
  { label: 'deploys', items: [{ label: 'Production', href: '/prod', count: 12 }] },
]} />

Pagination

Page navigation as pure links — works JS-off, no island — with the windowing algorithm frozen into tested code (a gap of exactly one page renders the page, never "1 … 3"). Machine register: mono tabular numerals; the current page thickens its rule in accent, echoing Tabs. compact renders the readout for tight rows.

<Pagination page={6} pageCount={20} href={(p) => `/deploys?page=${p}`} />
<Pagination compact page={6} pageCount={20} href={(p) => `/deploys?page=${p}`} />

Breadcrumbs

Semantic path navigation — a labelled nav around an ordered list, last item current (explicit current wins, rendered as text with aria-current="page"). Pure links: works JS-off, no island. The separator is a quiet mono slash, not a chevron.

<Breadcrumbs items={[
  { href: '/', label: 'Deploys' },
  { href: '/apps/launchpad', label: 'launchpad' },
  { label: 'deploy #4821' },
]} />

Tabs

Remix tabs primitives (keyboard, roving focus, aria — zero rebuilt) in the drafting grammar: the row rides a hairline rule, the active tab thickens it with the accent underline. Static here — switching runs on the remix client runtime; the demo's browser gate drives click/arrow/End on the live island.

<Tabs defaultActiveTab="overview">
  <TabList label="Deploy sections">
    <Tab name="overview">Overview</Tab>
    <Tab name="log">Log</Tab>
  </TabList>
  <TabPanel name="overview">…</TabPanel>
  <TabPanel name="log">…</TabPanel>
</Tabs>

Toggle button

The toolbar toggle: aria-pressed on a native button, for independent stateful actions (pin, mute). Vocabulary triage — Switch is form on/off, SegmentedControl is exclusive choice, ToggleButton is independent pressed state. Pressed reads as a filled slot (raised ground + accent edge), never color alone. Live on the demo styleguide, gate-flipped.

<ToggleButton defaultPressed onPressedChange={(p) => …}>Pin</ToggleButton>
<ToggleButton label="Mute">🔇</ToggleButton>

Command palette

The kit Dialog composed around the combobox's filtering listbox — zero new behavior code. Commands are links: committing navigates, so the server stays the router. Keyboard-driven (type a label prefix, arrow, Enter); the gate drives it end-to-end on the demo styleguide. Wire your own global ⌘K in an app island.

<Btn mix={onOpenDialog('cmdk')}>Commands <Kbd>⌘K</Kbd></Btn>
<CommandPalette id="cmdk" commands={[
  { label: 'Open deploys', href: '/', searchValue: ['home'] },
  { label: 'Open styleguide', href: '/styleguide', searchValue: ['sg'] },
]} />

Popover

Generic anchored panel for filters, inspectors, and view options — remix popover primitives own positioning, Escape/outside light dismiss, and focus return; focus moves into the panel on open. Shares the picker surface paint. Live on the demo styleguide where the gate drives open/dismiss/focus. Pickers stay on Select/Menu/Combobox; titled content wants a Drawer.

<Popover label="View options">
  <Checkbox label="Show archived" name="archived" />
  <Switch label="Compact rows" name="compact" />
</Popover>

Drawer

Dialog's side-panel sibling on the same native dialog contract — focus trap, Escape, backdrop, and focus-return all browser-owned. Pinned full-height to either edge with a scrolling body; the gate asserts the pin geometrically on the live island. For editors, detail peeks, and filter panels.

<Btn mix={onOpenDialog('details')}>Details</Btn>
<Drawer id="details" title="Deploy details" side="right" width="380px">
  <DescriptionList items={…} />
</Drawer>

Menu

Row actions and command groups on the remix menu primitives (keyboard, typeahead, checkbox/radio items — zero rebuilt), wearing the shared picker popup. The trigger is a kit Btn; glyph triggers ("⋯") are still named for assistive tech by label. The last wrapper non-goal, overturned on the record. Live on the demo styleguide — the gate opens it, selects, and watches the selection land as a toast.

<Menu label="Row actions" trigger="⋯" size="sm">
  <MenuItem name="rename">Rename</MenuItem>
  <Submenu label="Move to">   {/* NEW — one level; deeper wants a CommandPalette */}
    <MenuItem name="move-prod" value="production">Production</MenuItem>
    <MenuItem name="move-staging" value="staging">Staging</MenuItem>
  </Submenu>
  <Separator />
  <MenuItem name="delete">Delete</MenuItem>
</Menu>
// listen: mix={onMenuSelect((e) => …e.item.name…)} on a wrapper

Toaster

Transient notices: mount one Toaster per page, fire toast(…) from any island (notices travel as DOM events). A toast is the receipt, never the record — frame reloads stay the truth. Polite live region, no focus stealing, hover pauses timers, fail tones stick until dismissed. Fully client-side, so it lives on the demo styleguide where the gate drives appear / stick / dismiss / auto-dismiss.

<Toaster />  {/* once per page */}

// from any island:
toast({ title: 'Deploy recorded', message: 'launchpad is live.', tone: 'pass' })
toast({ title: 'Deploy failed', message: 'Check the log.', tone: 'fail' })  // sticky

Dialog

Modal on the native dialog element — focus trap, Escape, backdrop, and focus-return are all browser-owned; the kit wires the title, the labelled close, and a scheme-correct backdrop veil. Openers live in islands (onOpenDialog(id)); form method="dialog" buttons close natively. Widths sm · md · lg. Drawer's side="bottom" is the mobile SHEET (full-width, ≤70dvh, slide-up, gate-pinned); Toaster covers all four corners. Below, the paint as a static non-modal preview — the demo gate drives open/close/Escape/focus on the live island.

<Btn mix={onOpenDialog('confirm')}>Delete</Btn>
<Dialog id="confirm" title="Delete deploy?" actions={
  <form method="dialog">
    <Btn type="submit">Cancel</Btn>
    <Btn type="submit" variant="danger" value="confirm">Delete</Btn>
  </form>
}>
  Removes deploy #4821 from the log. This cannot be undone.
</Dialog>

AlertDialog

Interruptive native decision dialog with explicit context, cancel-first focus, and app-owned actions.

<AlertDialog id="delete-deploy" title="Delete deploy?" description="This cannot be undone." actions={<DeleteDeployAction />} />

Accordion

Disclosure set on hairline rules — remix accordion primitives, with the kit owning the heading-wraps-button structure. Single mode is collapsible by default; static here (toggling runs on the remix client runtime; the demo gate drives swap + collapse on the live island).

<Accordion defaultValue="tokens">
  <AccordionItem value="tokens" title="What ships in /tokens?">…</AccordionItem>
  <AccordionItem value="schemes" title="How do color schemes work?">…</AccordionItem>
</Accordion>

Tooltip

Supplementary, non-interactive descriptions only. The actual trigger ownsaria-describedby; focus opens immediately, pointer hover waits, and Escape dismisses inside an island. Interactive help belongs in Popover.

<Tooltip content="Supplementary help" trigger={(a) =>
  <button aria-describedby={a.ariaDescribedBy}>About this control</button>
} />

Copy button

Copies its text to the clipboard: the glyph flips to a check and a toast fires when the page mounts a Toaster; insecure-context failures surface as a fail toast, never silently. Island doctrine — live on the demo styleguide, where the gate asserts the actual clipboard contents. This drop also ran the first consumer validation (fresh scaffold + file: install), which caught and fixed a real streaming-renderer fragment bug.

<CopyButton text="d0a2f7e" label="Copy commit" announce="Commit sha copied." />
<CopyButton text={url} glyphOnly label="Copy link" />

Buttons

Native button host. Default is secondary; one primary per view, on the action the view exists for.

<Btn variant="primary" type="submit">Record deploy</Btn>

IconButton

Native square button for glyph-only actions with a required accessible name and pending state.

<IconButton label="Refresh deploys">↻</IconButton>

SplitButton

Joined primary action and menu trigger for one default command with closely related alternatives.

<SplitButton primaryLabel="Deploy" menuLabel="Other deploy actions">{items}</SplitButton>

Toolbar

Labelled action set that progressively enhances direct controls with roving arrow-key focus.

<Toolbar label="Editing tools"><Btn>Bold</Btn><Btn>Italic</Btn></Toolbar>

Timeline

Chronological event feed: tone dots on a hairline rail, mono stamps riding each entry, a real ordered list. Zero JS — realtime feeds pair it with a frame and the LivePill. Dots are decorative; semantic state goes in a Badge.

1. Deploy recorded14:02

   launchpad → production

2. Build started14:00
3. Pushed d0a2f7e13:58

<Timeline label="Deploy activity" events={[
  { title: 'Deploy recorded', meta: '14:02', detail: 'launchpad → production', tone: 'pass' },
  { title: 'Build started', meta: '14:00', tone: 'pending' },
]} />

Stat and DescriptionList

The dashboard/detail sweep, zero JS. Stat: lowercase mono caption, a big tabular-nums reading, quiet unit, and a Badge delta whose tone the APP judges (a falling number is good for latency, bad for revenue — no sign-sniffing). DescriptionList: a real dl — row layout for detail sheets, stack for responsive columns.

Region

us-east-1

Runtime

node 24.3

Commit

d0a2f7e

<Stat label="p95 latency" value="184" unit="ms" delta="−40ms" deltaTone="pass" />
<DescriptionList layout="stack" items={[{ term: 'Region', detail: 'us-east-1' }, …]} />

Sparkline

The word-sized trend beside a reading — zero-JS SVG straight from server data. It shows SHAPE, not values (anything wanting axes or hover readouts is a chart, and the kit doesn't ship charts). label is required and states what the trend MEANS; tone is the app's judgment (default neutral — data is data, not action); fill opts in. One value draws just the now-dot; empty keeps the baseline.

<Sparkline values={perDay} label="Deploys per day over two weeks, rising" tone="accent" fill={true} />
<Sparkline values={errorRate} label="Error rate, falling" />

Progress

Determinate progress, fully wired (role="progressbar", name, min/max/now, clamped). No indeterminate mode — unknown-duration work is a pending Callout or the LivePill, not a bar pretending to measure.

<Progress value={3} max={8} label="Migration steps" readout="3 of 8" />

Spinner

CSS-only indeterminate progress indicator with optional status semantics and reduced-motion treatment.

<Spinner label="Loading deploys" size="md" />

Badges

Machine-register chip, lowercase by construction. Status speaks through the dot; the label stays readable in both schemes.

<Badge tone="pass">pass</Badge>

Table

Hairline rules, tabular numerals, a labelled scroll region — no boxes.

NEW: sortable column headers as pure links — the server owns sort state through the URL (JS-off), and only the active column carries aria-sort. Plain string headers still work. The mixin tier also gained textareaCss for multi-line Fields.

<Table caption="Recent deploys" head={['app', 'status', 'when']}>…</Table>

DataTable

Serializable data table with server-owned sorting, optional native row selection, and a valid empty state.

<form method="post"><DataTable caption="Deployments" columns={columns} rows={rows} selectionName="deploy" /><Btn type="submit">Apply selection</Btn></form>

Identity

The "who" row — Avatar + ink name + quiet mono meta; the unit for assignee cells, comment headers, member lists. href makes the whole row one quiet link (hover surface, underlined name — not blue text). The avatar is aria-hidden here: the visible name announces once.

<Identity name="Ada Lovelace" meta="ada@example.dev" />
<Identity name={user.name} meta={<Time value={seenAt} now={now} />} href={routes.member.href({ id })} />

Avatar, Separator, and Skeleton

Small pieces, zero JS. Avatar draws a deterministic identity hue from the six icon tokens (same name, same hue, both schemes) with image + initials modes and three sizes. Separator is a real hairline hr (or a vertical role="separator"). Skeleton pulses opacity only and is decorative by construction — mark the loading container, not the bones.

<Avatar name="Ada Lovelace" />           // initials AL on Ada's hue
<Avatar name="Ada Lovelace" src="/ada.png" size="lg" />
<Separator />                            // <hr>; vertical via orientation
<Skeleton width="60%" />                 // line · block · circle

UploadList

Presentational native list for file names, sizes, transfer status, progress, errors, and app-owned actions.

<UploadList label="Current uploads" items={uploads} />

Empty states

The one human-register moment: display serif, dashed border. The quiet variant is for screens whose serif budget the masthead already spent.

<EmptyState title="Nothing deployed yet" hint="Record one above." />

Callouts

Inline feedback as a diff-gutter change-bar — a 2px rule in the status hue plus the status dot, no fill and no box. Hues mark; they never paint surfaces or carry text. live maps to role="status"/role="alert" for callouts inserted after user action.

<Callout tone="fail" title="Deploy failed" live="assertive">
  The build exited non-zero. Check the log, then retry.
</Callout>

Context menu and slider

ContextMenu opens the Menu machinery at the pointer (right-click or the keyboard menu key) on a labelled group — with the shortcuts law: every context action also exists as a visible control. sliderCss completes the native form-control sweep: a token-styled range input, JS-off, Field- composable; the thumb position is the readout.

<ContextMenu label="Deploy row actions" menu={<>
  <MenuItem name="retry">Retry</MenuItem>
  <MenuItem name="view-logs">View logs</MenuItem>
</>}>
  …the row/card…
</ContextMenu>

<Field label="Failure threshold" name="threshold">
  {(a) => <input type="range" id={a.id} name={a.name} mix={sliderCss()} />}
</Field>

ErrorSummary

The form-level error block for SERVER-side validation (the GOV.UK pattern): render above the form after a failed POST — role="alert" announces, each error links to its field (href: '#email' + Field id="email"). Renders nothing when empty. Links are ink with underline: hues mark (the fail rule and dot), never carry text.

<ErrorSummary errors={[{ message: 'Enter your email address', href: '#email' }]} />
<Field label="Email" name="email" id="email" error={errors.email} />

Dropzone

File upload as progressive enhancement over the NATIVE input: JS-off it is a working picker inside your form POST; inside an island you get drag-drop, the chosen-files list (name + formatBytes), and per-file remove. Dropped files land IN the input via DataTransfer — the form submits identically either way. The upload stays app-owned.

<Dropzone label="Attachments" name="files" multiple={true}
  hint="png or pdf, up to 5 MB" />  {/* inside a clientEntry island */}

TagInput

Tags over REPEATED FORM FIELDS: every chip is a hidden input named name, the entry input carries name too, and the server flattens every path with parseTags(formData.getAll(name)). JS-off: chips render static and the entry still adds (comma-separated); removal is island behavior — enter/comma commits, backspace pops, × removes.

<TagInput label="Labels" name="labels" defaultValue={deploy.labels} />  {/* island */}
// server: const labels = parseTags(formData.getAll('labels'))

Combobox

Input-first picker on the remix combobox primitives (filter, typeahead, aria — zero rebuilt), wearing the same popup spec as Select via a shared internal module, so the two pickers cannot drift. Type to filter — searchValue takes alias arrays — and commit one stable hidden-input value. Filtering runs on the client runtime; the demo gate types, filters by alias, and commits live.

<Combobox name="app" placeholder="Search apps">
  <ComboboxOption label="console" value="console" searchValue={['con', 'admin']} />
  <ComboboxOption label="launchpad" value="launchpad" searchValue={['lp']} />
</Combobox>

ComboboxMulti

Stable-value multi-picking over a real native select multiplefallback. In an island it enhances to removable chips plus the existing Combobox; both paths submit repeated values through getAll(name).

<ComboboxMulti label="Reviewers" name="reviewers" options={people} />
// server: formData.getAll('reviewers')

Radio group

Native radios in a real fieldset/legend — the grouping semantics forms need. Works JS-off; group hint/error wire like Field; per-option hints and disabled; stack or row orientation. These are live — pick one.

<RadioGroup label="Environment" name="env" defaultValue="staging"
  options={[
    { value: 'production', label: 'Production' },
    { value: 'staging', label: 'Staging', hint: 'Deploys still notify the room.' },
  ]} />

CheckboxGroup

A real fieldset/legend for repeated checkbox values, with shared hint and server error wiring.

<CheckboxGroup label="Notify through" name="channels" options={channels} />

Segmented control

The compact view/mode switch on native radios — arrow-key roving and form participation are browser-owned, so it works JS-off with no island. These are live — click or arrow between segments. Intent triage: RadioGroup for labelled form choices, Tabs for panels swapping in place, this for inline chrome.

<SegmentedControl label="View" name="view" defaultValue="board"
  options={[
    { value: 'table', label: 'Table' },
    { value: 'board', label: 'Board' },
  ]} />

ToggleGroup

Native radio or checkbox fieldset dressed as a joined single- or multiple-selection group.

<ToggleGroup label="Cadence" name="cadence" type="single" options={options} />

Checkbox and Switch

Native checkbox hosts in a wrapping label — they submit in plain forms with JS off. Checkbox for facts that take effect on submit; Switch (announces role="switch") for settings that read as on/off. These are live — click them.

<Checkbox label="Notify the room" name="notify" defaultChecked />
<Switch label="Maintenance mode" name="maint" hint="Serves the static page; deploys queue." />

DateField

Native date and local date-time controls with Field label, constraint, hint, and error wiring.

<DatePicker label="Start date" name="start" min="2026-01-01" />
<DateField label="Run at" name="runAt" type="datetime-local" />

InputOTP

Single native text input for one-time codes so autofill, paste, and leading zeroes remain intact.

<InputOTP label="Verification code" name="code" length={6} pattern="[0-9]{6}" />

Specialized form controls

Native search, textarea, number, and range controls with Field wiring, plus consistent responsive action layout.

<SearchField label="Search" name="q" />
<TextareaField label="Note" name="note" autoSize />
<NumberField label="Retries" name="retries" min={0} max={8} />
<RangeField label="Threshold" name="threshold" min={0} max={100} />
<FormActions><Btn>Cancel</Btn><Btn variant="primary">Save</Btn></FormActions>

Form fields

Label, control, hint, and error fully wired for assistive tech. The error state below is a specimen, not a mistake. NEW: FormSection groups several Fields under a real legend (announced with each control) — one decision is a RadioGroup; many related Fields are a FormSection.

<Field label="App" name="app" required hint="1–60 characters." />

API reference

Every exported *Props interface, generated FROM SOURCE at render time — names, types, optionality, and doc lines are read out ofsrc/ui by a syntactic parse, so this reference cannot drift from the code. Required props have no ?.