A thousand screens.One source of truth.Zero forked components.
The on-brand, mobile-first, themeable, accessible kit every front-end app on the platform builds from. Theme and config only — never a forked component.
One kit, everywhere it runs
Watch it re-theme itself, live
Our product is the design system — so the page shows it working. Pick a preset and the real components beside it re-theme in real time. Theme and config only, no screenshots.
Pick a preset. The whole page re-themes in real time — every component, live, through the same tokens each app ships with. Nothing here is a screenshot, and not one component is forked.
Ink on paper. The reference.
- Radius
- 0.625rem
- Font
- System sans
/theme.importing the kit
Every part earns its place
Not a grab-bag of components — a coherent system where theming, chat, command, and motion all speak the same tokens.
Change a token. Watch everything move.
Every component reads the same oklch variables the preset ships. There is no second styling path — a brand is a set of tokens, so re-theming is a config change, never a fork.
- One :root contract: colors, radius, and font
- Light and dark both immaculate, from the same tokens
- Export the theme as CSS and paste it into any app
A chat surface that only renders.
Conversation, messages, streaming, reasoning, tool calls, and the composer — presentational and transport-agnostic. Your app owns the stream; the kit owns the craft.
- Streaming-safe markdown with copyable code
- Role-aware bubbles, tool-call cards, typing states
- Zod message shapes you infer your types from
Everything reachable from the keyboard.
A ⌘K palette and a shortcut system are part of the shell, not a bolt-on. Register commands anywhere; they show up ranked, searchable, and consistent across every app.
- Fuzzy-ranked, grouped, and theme-aware
- Register commands from any component
- A help overlay documents the keys for free
- Jump to Live demoGD
- Open the theme editorGT
- Explore the componentsGC
Built to a bar, not a whim
Six commitments the whole system holds — so a screen assembled from it is correct before you style a thing.
Mobile-first, to a bar
Correct at 375, 768, and 1280. No sideways scroll, labels never wrap, touch targets stay honest. The UI Quality Bar ships as tests, not hopes.
Base UI, not Radix
Accessible Base UI primitives on Tailwind v4 — keyboard-first and unstyled underneath, so the look is entirely ours to theme.
Tokens-only theming
One CSS-variable contract in oklch. Re-theme the whole system by config; you never fork a component to restyle it.
Imports, not copies
Apps do not own components. `cf new app` scaffolds a shell that imports the package and inherits every fix and every new part.
Presentational by design
Components render; they do not fetch. Transport-agnostic throughout, so any app supplies the data and owns the wire.
Accessible in both themes
Tooltips on truncation, real hit areas, AA contrast, and focus-visible rings — verified in light and dark, not just one.
Every export, on show.
States and variants.
Plus radius and font.
Public, on the Cloudflare edge.
A kit for the whole screen
Primitives to full application chrome — every piece exported, themed, and demonstrated. Open any area to browse it live.
Three lines to a themed app
Scaffold, import, and theme. The bar, the tokens, and every component come for free.
- 1 · Scaffold
Generate a React Router app on Cloudflare, pre-wired to the design system.
cf new app my-app - 2 · Import
Pull components straight from the package — nothing to copy into your app.
import { AppShell, Button } from '@package/web-ui'; - 3 · Theme
Override tokens for your brand. You edit CSS variables, never a component.
import '@package/web-ui/preset.css';
docs/create-a-new-app.mdScaffold to deploy, end to end./web-uiHouse rules: Base UI, tokens, where components live./ui-quality-barThe definition of done, and the tests that enforce it.