Production React UI, themed by one colour
614 accessible components and 11 finished screens. Install them, copy them as source, or assemble them in the Composer — then change one colour and every one of them follows.
Notifications
Monthly revenue
Against August
- components
- 614
- production screens
- 11
- product templates
- 4
- integrations
- 11
- contrast on any accent
- 4.5:1
- MCP tools for agents
- 9
Drop your logo. This page becomes your brand.
Drag a logo, a product shot or any photo onto this page — anywhere — or paste one. Its colours are read right here in your browser, nothing is uploaded, and the most vivid one themes every component you can see.
A design system you can adopt this week, and still trust next year
Most component libraries are quick to start and slow to live with. These are the four things that decide which kind a library is.
--color-accent
#c8f24e
--color-accent-strong
#c0f428
--color-accent-soft
#eff8d3
--color-accent-ink
#1e2509
One colour themes everything
Four tokens are derived from a single hue: the fill, its press state, a wash, and the text on top. No component hard-codes a colour, so a rebrand is one function call.
Accessible, and tested to prove it
Every component page is audited with axe, keyboard paths are driven in tests, and anything that moves has a still state. The build fails when a rule slips.
Yours to own
Install the package, or copy the source with the CLI — dependencies resolved, imports intact.
Readable by your agent
An MCP server and an Agent Skill ship in the package, so an agent reads the real props and tokens.
From idea to shipped screen, in four steps
Each step is a tool on this site, built from the same design system as the components themselves.
- Step 1
Find
Search everything with ⌘K, or answer two questions and get the components, screens and recipes that fit.
- Step 2
Compose
Start from a finished block, or assemble a screen in the Composer from the real components.
Card › Field › InputOpen the Composer - Step 3
Theme
Pass one colour. The fill, press state, wash and label colour are derived from it, readable on every hue.
- Step 4
Ship
Install the package, or take the source with the CLI — every file a component imports comes with it.
npx klyvui addGet started
Real screens, not screenshots
Every block is assembled from the library and nothing else — no colour, radius or spacing of its own. Sort the tables, open the dialogs, flip the switches: every control is wired.
Members
Seats in use
of 60 licensed
Signups
November
Growth
- Signups
- Active
| Category | Signups | Active |
|---|---|---|
| Apr | 124 | 96 |
| May | 168 | 121 |
| Jun | 152 | 118 |
| Jul | 210 | 167 |
| Aug | 248 | 194 |
| Sep | 232 | 186 |
| Oct | 296 | 233 |
| Nov | 341 | 279 |
By role
- Owner2
- Editor3
- Viewer3
| Owner | 2 |
|---|---|
| Editor | 3 |
| Viewer | 3 |
Profilers, forecasts and merge tools, already built and already themed
Profilers, error budgets, forecasts, regex and cron editors, merge tools. Select a span, zoom the profile, resolve a conflict: every panel below is one import, and every one of them is wired.
Everything between an idea and a production screen
The components are the start. Around them: a Composer, search that understands what you mean, recommendations, starters, recipes and setup guides — all built from the same system and the same data.
Composer
Drag real components and blocks onto a canvas, edit the props that matter, undo anything, and preview at desktop, tablet and phone widths. Then take the code — imports, install commands and every dependency included.
import { Button, Card, Field, Input } from 'klyvui'export default function Screen() { return ( <Card title="Invite a teammate"> <Field label="Email"> <Input type="email" /> </Field> <Button fullWidth>Send invite</Button> </Card> )}What the Composer writes for an invite card.
Search that understands you
One palette over components, screens, recipes, tokens, docs and releases. It ranks, forgives a typo, and knows that “login” means authentication.
Find My UI
Say what you are building and what it needs. Get the components, screens, templates and recipes that fit — each with the reason it was picked.
Answer two questionsHealth you can check
- TypeScript
- Dark mode
- Axe-audited
Only what is measured is shown. A test fails if a claim appears without evidence.
See the evidenceEveryday parts, and the ones you would otherwise build yourself
The workbench above is the everyday end of the range. Here is how far it goes — a git graph, a zoomable sunburst, a profiler's flame graph. Every tile is the component you would import, running.
Foil · 001 / 614
Hold the pointer
The foil tracks where you are and settles when you leave.
- "event": "delivery.completed"
- "id": "evt_1Q8xR2"
- "shipment": "MF-40211"
- "signedBy": "M. Laurent"
- "onTime": true
- "minutesEarly": 14
- "attempts": 1
- "receivedAt": "2026-09-11T09:30:04Z"
Take a card apart. Every layer is a component.
Pull the slider and a working card comes apart into the components it is made of, each named on its edge. It is the live interface in 3D, not a drawing: type in the field or flip the switch while it floats.
Invite a teammate
ProThey join the Northwind workspace
Drag the empty space around the card to orbit it.
- <Surface />
- <AvatarGroup />
- <Badge />
- <Field />
- <Input />
- <SegmentedControl />
- <Switch />
- <Button />
And then there are the ones that have no business being in a component library
21 of them carry a tag of their own: real fluid, real cloth, real light casting real shadows, glass that actually breaks, a black hole that eats the layout. Every one of them takes its colour from the same accent as the buttons.
Grown, not drawn
Behind these words is ReactionDiffusion: two chemicals feeding and consuming each other on the GPU, coloured by the same accent as every button on this page. Move the pointer across it to seed new growth.
Say what you are building. Get the components that fit.
Describing a screen is easier than knowing what it is called. In the next release the assistant reads what you are after and recommends from all 614 components, screens and recipes — with the reason it picked each one.
Recommended
4 of 614- HeroSectionSaaS · MarketingThe first screen of a marketing site, not an in-app banner
- LogoCloudSaaS · MarketingThe proof strip a hero is usually followed by
- FeatureGridSaaS · MarketingBenefit-led features, the section after the fold
- AuroraSurfaceMotion & Effects · Surfaces & lightDrifting light behind the hero, and it holds 60fps
Labelled honestly: the chat, the thread and the cards above are real components from this library, and every recommendation links to its real page. The answers are scripted until the assistant ships — search and Find My UI already work.
Pick a hue. Everything follows.
Four custom properties are derived from one colour. Nothing else in the library names a colour, so the whole page repaints — this one included — and the text on the accent is chosen by contrast, not by guesswork.
--color-accent
#c8f24e
--color-accent-strong
#c0f428
--color-accent-soft
#eff8d3
--color-accent-ink
#1e2509
Label on accent
12.3:1
AAAText on wash
16.0:1
AAADerived, not configured
The press state is the same hue at a different lightness. The wash is the same hue, desaturated — and different on a dark page, where a pale tint would glare. The label colour prefers a tinted near-black, then white, whichever clears 4.5:1.
import { applyAccent, applyMode } from 'klyvui'applyAccent('#c8f24e')applyMode('system') // light, dark, or follow the OSThe accent is one of five choices. Base colour, radius, font and depth are themeable the same way.
Try the theme customiserRead the example, and you know how to use it
Plain React components with typed props, a theme API that is two functions, and three ways to take the code: the package, the source, or your agent.
Props documented from the type — the API tables cannot drift from the code
ESM, one module per component, side effects declared: import one, ship one
'use client' only where it is needed — 94 modules stay on the server
Copy the source with the CLI; relative imports resolve where they land
Bring your own icons — anything with size and className fits
import { Button, Card, Field, Input } from 'klyvui'import 'klyvui/styles.css'export function Invite() { return ( <Card title="Invite a teammate"> <Field label="Email" hint="They will get a link that expires in 7 days."> <Input type="email" placeholder="ada@example.com" /> </Field> <Button>Send invite</Button> </Card> )}What an import costs
Median component
gzipped, dependencies included
Lightest
VisuallyHidden
Heaviest
OrbitSandbox
All 614 at once
the ceiling, not a bundle
Measured on the built package over each component's whole dependency set — what a bundler adds for that one import. The last figure is every module at once: an upper bound, not something any app ships.
Know what it weighs before you install it.
Pick the components your product needs. The total is worked out from the real build: every module each one pulls in, with code they share counted once — and the install command for exactly that set.
Paste your own numbers. Watch them become the components.
Copy a block of cells out of a spreadsheet and drop it in. The columns are sniffed and typed by the library's own CSV parser, then handed to a real table, chart and pivot — with the code for your columns underneath. It never leaves this tab.
Total Revenue
Across 3 month values
Average Revenue
Per month
- Revenue
- Expenses
| Category | Revenue | Expenses |
|---|---|---|
| 2026-04 | 413k | 229k |
| 2026-05 | 433k | 236k |
| 2026-06 | 461k | 247k |
| 2026-04 | EMEA | 128,400 | 74,200 |
| 2026-04 | Americas | 196,300 | 101,800 |
| 2026-04 | APAC | 88,100 | 52,600 |
| 2026-05 | EMEA | 134,900 | 76,100 |
| 2026-05 | Americas | 204,700 | 104,500 |
| 2026-05 | APAC | 93,800 | 55,200 |
9 rows
| Month | Americas | APAC | EMEA | Total |
|---|---|---|---|---|
| 2026-04 | 196k | 88.1k | 128k | 413k |
| 2026-05 | 205k | 93.8k | 135k | 433k |
| 2026-06 | 219k | 102k | 141k | 461k |
| Grand total | 620k | 283k | 405k | 1308k |
import { BarChart } from 'klyvui'const categories = ['2026-04', '2026-05', '2026-06']const series = [ { id: 'Revenue', label: 'Revenue', values: [412800, 433400, 461300] }, { id: 'Expenses', label: 'Expenses', values: [228600, 235800, 246600] },]<BarChart series={series} categories={categories} label="Revenue and Expenses by Month" />Keep what you use, as documents you own
Favourites, collections and Composer drafts — a personal, document-based workspace that comes with Klyv. No account, no extra install, nothing to set up.
Collections are documents
File components, screens, templates, recipes and integrations into named collections — one per project, screen or client.
Compositions are documents
A Composer draft is a JSON composition: save it, return to it, copy it — or copy the code it becomes.
Yours, and nobody else’s
No account, nothing sent anywhere. It lives in your browser and exports as one JSON document. Sync between devices is not available yet.
A saved-items document
Example- 0: "component:data-table"
- 1: "block:login"
- "name": "SaaS dashboard"
- 0: "component:data-table"
- 1: "component:stat-card"
- 2: "block:saas-dashboard"
- "name": "Authentication"
- 0: "block:login"
- 1: "block:signup"
- 2: "recipe:login-flow"
Favourite anything on the site and this becomes your own document.
Standards you can check, not adjectives
Each number is produced by a test or a build step in the repository, and shown on every component’s own page as its health.
- 614components pass axe
Every component page, of 614, is rendered and audited on each test run — examples, API table and all.
- 4.5:1on every shipped accent
Colour contrast is measured in a real browser, in both themes, across the extremes of the accent ramp.
- 13components keyboard-tested
Focus traps, roving focus, arrow keys and Escape are driven with user-event, not asserted in prose.
- 77animations with a still state
Anything that moves has a reduced-motion answer. The build fails on one that does not.
- 0hard-coded colours
A hex literal outside an explicit, documented allowlist fails the build. Themes change values, never names.
- 94server-safe modules
'use client' is derived from the code and verified on every build, so Server Components just work.
Ship the first screen today
Start from one of 11 screens or compose your own from 610+ components. Pick one colour. Every part of it is yours to copy.