The kernel of the web, componentised.

A component library built on real semantic HTML instead of div soup, themeable from a handful of CSS variables.

Why Kernel

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

--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 */

Real elements

button, dialog, details, fieldset. The behaviour, keyboard support, and accessibility the browser already gives you, instead of rebuilding it in a div.

Styling, your way

Plain CSS, CSS Modules, or Tailwind. The components don't care, they only ever read from the token layer.

Principles

How it's built

Four decisions that shape every component, not just the ones on this page.

Composition: An explicit render prop, not asChild magic. 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

@kernelui/react is the flagship. @kernelui/elements is the same design system as native Custom Elements — Vue, Svelte, Astro, or plain HTML, no wrapper required, same tokens either way.

React

import { Button } from "@kernelui/react";

<Button variant="primary">Save changes</Button>

Anywhere else

<script type="module">
  import "@kernelui/elements";
</script>

<kernel-button variant="primary">Save changes</kernel-button>

Try the cascade

Accent theme

Base radius

Colour scheme

Dark mode

Checkbox

AccentSuccessWarningDanger

Card corners follow the radius above too.

Get started

Built on the parts of the web that already work.

Six components and four landmark primitives are ready today, with the full set on the way.

Browse components Get started