Platforms

Kernel ships two runtimes today. @kernelui/react is the flagship — the most complete, most polished, and where new components land first. @kernelui/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/styles, so a theme change (accent hue, radius, dark mode) reshades both identically.

React

The primary API. Every component in the library is available here first.

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

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

Web Components

@kernelui/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/react uses apply here untouched.

npm install @kernelui/elements

<script type="module">
  import "@kernelui/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.

This is an early set: the 14 structurally simple components (Button, Badge, Card, Nav, and similar) are ported so far. The behaviorally complex ones — Dialog, Popover, Tooltip, Tabs, DropdownMenu, Combobox, Accordion — are still React-only while their keyboard and focus handling gets ported over.

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/react";
// No "@kernelui/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/styles on its own and stop there:

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

Choosing between them

Building with React? Use @kernelui/react — it's the complete set. Building with something else, or need a component usable from more than one framework on the same page? Reach for @kernelui/elements for what's ported so far. Either way, the same accent hue, radius, and spacing tokens theme both at once.