The kernel of the web, componentised.
A component library built on real semantic HTML instead of div soup.
Showcase
Real components, composed into real screens
A scheduling card. A docs nav. An install panel. Each one is the real library at work, not a screenshot.
One value, one cascade
Every colour, radius, and duration is a CSS custom property. Change one token and every component updates, live, everywhere it's used — try it further down the page.
--kernel-hue-accent: 70; /* → every accent shade re-hues */
--kernel-radius-base: 1.25rem; /* → every corner re-rounds */
--kernel-space-unit: 0.25rem; /* → every gap and padding rescales */Talk to us
Pick a time that works for your team.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Preferences
Dark mode
Ligatures
<Button variant="primary">Ship it</Button>Shortcuts
Search components
Jump to any component or page
Toggle theme
Switch between light and dark
Copy markdown
Copy this page as markdown
Contributors
Account menu
KernelGet started
One package, every platform.
kernel-ui
MITThe actual kernel of the web, componentised.
Open source
50 Components
0 Runtime deps
Platforms
React
50 components
Elements
50 components
v0.1.0
React and Web Components packages, shared design tokens.
Reduce motion
Respect prefers-reduced-motion automatically
You have unsaved edits
Save before you switch pages, or discard them now.
Principles
How it's built
Four decisions that shape every component, not just the ones on this page.
- Composition
- An explicit
renderprop, notasChildmagic. What actually renders is always visible at the call site. - State
- Real pseudo-classes —
:checked,:disabled,:user-invalid— wherever the browser already gives you one.data-*everywhere else. - Distribution
- A versioned, tree-shakeable npm package, not a copy-paste registry. Import what you use.
- Naming
- The actual kernel of the web: the elements and behaviour browsers already ship.
Comparison
What a real element buys you
Same button, same look. One gets focus, keyboard activation, and disabled state from the browser for free. The other has to catch up by hand, and still won't get form submission or :focus-visible right without more code.
Kernel
<button
type="button"
onClick={save}
>
Save changes
</button>Div soup
<div
role="button"
tabIndex={0}
aria-disabled="false"
onClick={save}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
save(e);
}
}}
>
Save changes
</div>Platforms
Everywhere you already build
Three ways in. @kernelui-lib/react is the flagship. @kernelui-lib/elements is the same design system as native Custom Elements — Vue, Svelte, Astro, or plain HTML, no wrapper required. Or skip the stylesheet on either one and get real, fully-functional semantic elements with none of Kernel's own look — just the bones, themed however you want.
React
import { Button } from "@kernelui-lib/react";
<Button variant="primary">Save changes</Button>Anywhere else
<script type="module">
import "@kernelui-lib/elements";
</script>
<kernel-button variant="primary">Save changes</kernel-button>Unstyled
import { Button } from "@kernelui-lib/react";
// No "@kernelui-lib/react/styles.css" import anywhere —
// <Button> is still a real <button>, just unstyled.Playground
Try the cascade
Accent theme
Base radius
Colour scheme
Card corners follow the radius above too.
Get started
Built on the parts of the web that already work.
Kernel is MIT-licensed and developed on GitHub. Contributions to docs, accessibility, and component parity are welcome.50 components are ready today. The full set is live.
On LLMs
