Installation

Every package reads its colours, radius, spacing, and type from @kernelui-lib/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.

CLI (recommended for React)

The fastest way to wire up a React project — especially when migrating from shadcn/ui:

npx @kernelui-lib/cli init

See the CLI guide for kernel doctor,kernel docs, and options like --tailwind and --accent. Migrating from shadcn/Radix? Read the migration guide after init.

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-lib/react @kernelui-lib/styles

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

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

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

Skip the @kernelui-lib/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-lib/elements ships the same design system as framework-agnostic Custom Elements, for Vue, Svelte, Astro, or plain HTML.

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

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

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

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

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

See platforms for framework-specific notes — Vue's isCustomElement option, Svelte, Astro.

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-lib/styles

See theming for the full token reference.