Platforms

Kernel ships two runtimes today, both covering the full component catalog. @kernelui-lib/react is the flagship — the reference implementation, and where new components land first.@kernelui-lib/elements is the same design system as native Custom Elements: framework-agnostic, usable from Vue, Svelte, Astro, or plain HTML with no wrapper at all. Both read the exact same tokens from @kernelui-lib/styles, so a theme change (accent hue, radius, dark mode) reshades both identically.

React

The reference implementation. Every component in the library lands here first.

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

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

Web Components

@kernelui-lib/elements renders every component as a real, autonomous Custom Element — a genuine <button>,<nav>, or <dialog> nested inside a tag like <kernel-button>, in light DOM (no shadow root), so the same token cascade and CSS classes @kernelui-lib/react uses apply here untouched.

npm install @kernelui-lib/elements @kernelui-lib/styles

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

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

Astro, Vue, and Svelte all consume these tags directly — Astro treats them as ordinary HTML with zero hydration cost for the components that need no interactivity; Vue needs app.config.compilerOptions.isCustomElement pointed at the kernel- prefix; Svelte needs nothing extra at all.

Every component in the catalog has a Custom Element equivalent now — including the behaviorally complex ones, like Dialog, Popover, Tabs, Combobox, and Accordion. They lean on the same native platform primitives @kernelui-lib/react does — <dialog>, popover/anchor positioning, <details> — which is what makes a vanilla-JS port of that behavior tractable at all.

Headless / unstyled

Both packages already separate behavior from appearance at the package level — styles.css is its own export, never bundled into the JS. Skip importing it and every component still renders as the real underlying element, fully functional, just with no Kernel-specific look:

import { Button } from "@kernelui-lib/react";
// No "@kernelui-lib/react/styles.css" import anywhere —
// <Button> is still a real <button>, just unstyled.

Want the token layer (fonts, spacing, colour variables) without Kernel's own component opinions, so you can build your own look on top of the same scale? Import @kernelui-lib/styles on its own and stop there:

@import "@kernelui-lib/styles";       /* tokens + reset only */
/* @import "@kernelui-lib/react/styles.css"; -- skipped on purpose */

Choosing between them

Building with React? Use @kernelui-lib/react — it's the flagship implementation, and where new components land first. Building with something else, or need a component usable from more than one framework on the same page? @kernelui-lib/elements covers the same full catalog as native Custom Elements. Either way, the same accent hue, radius, and spacing tokens theme both at once.