Installation

Every package reads its colours, radius, spacing, and type from @kernelui/styles — install it alongside whichever component package you're using, it's a dependency either way, listing it explicitly just keeps its version visible in your own package.json.

React

The flagship package: every component in the library, as real React components over real semantic HTML. Requires React and ReactDOM 18 or newer as peer dependencies.

npm install @kernelui/react @kernelui/styles

Import the tokens once, then the component stylesheet, then start using components:

import "@kernelui/styles";
import "@kernelui/react/styles.css";

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

Skip the @kernelui/react/styles.css import and every component still renders as its real underlying element, fully functional, just with no Kernel-specific look — see platforms for more on headless usage.

Web Components

@kernelui/elements ships the same design system as framework-agnostic Custom Elements, for Vue, Svelte, Astro, or plain HTML.

npm install @kernelui/elements @kernelui/styles

Import the tokens and the elements' own stylesheet in your CSS, then the elements module in a script tag:

@import "@kernelui/styles";
@import "@kernelui/elements/styles.css";

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

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

See platforms for framework-specific notes (Vue's isCustomElement option, Svelte, Astro) and which components have shipped as elements so far.

Tokens only

Building your own components on top of Kernel's scale, without any of its component opinions? Install just the tokens:

npm install @kernelui/styles

See theming for the full token reference.