# 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: ```bash npx @kernelui-lib/cli init ``` See the [CLI guide](/cli/) for `kernel doctor`, `kernel docs`, and options like `--tailwind` and `--accent`. Migrating from shadcn/Radix? Read the [migration guide](/migration/) 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. ```bash npm install @kernelui-lib/react @kernelui-lib/styles ``` Import the tokens once, then the component stylesheet, then start using components: ```tsx 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](/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. ```bash 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: ```css @import "@kernelui-lib/styles"; @import "@kernelui-lib/elements/styles.css"; ``` ```html Save changes ``` See [platforms](/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: ```bash npm install @kernelui-lib/styles ``` See [theming](/theming/) for the full token reference. --- # CLI The Kernel CLI handles the mechanical parts of integrating the library: installing packages, adding the required stylesheet imports, and checking that your project is wired up correctly. It does *not* copy component source into your repo the way shadcn/ui does — Kernel ships as npm packages. ## Install ```bash npm install -D @kernelui-lib/cli # or run once without installing: npx @kernelui-lib/cli init ``` ## `kernel init` Detects your package manager and framework (Vite or Next.js), installs `@kernelui-lib/react` and `@kernelui-lib/styles`, then idempotently adds the required CSS imports. ```bash kernel init kernel init --tailwind --accent blue kernel init --dry-run ``` Options: - `--tailwind` — use the Tailwind v4 bridge instead of plain CSS imports - `--accent ` — import a named accent theme (amber, blue, green, orange, red, teal, violet) - `--tokens-only` — install only `@kernelui-lib/styles` - `--dry-run` — preview file changes without writing - `--package-manager npm|yarn|pnpm|bun` — override lockfile detection - `--framework vite|next` — override framework detection ## `kernel doctor` Verifies React 18+, package installation, and stylesheet imports. If `components.json` or `@radix-ui/*` packages are present, it points you to the [migration guide](/migration/). ```bash kernel doctor kernel doctor --path ./apps/web ``` ## `kernel docs` Looks up component metadata from the local registry — useful for agents and offline development. Accepts a slug, component name, or shadcn alias. ```bash kernel docs kernel docs text-field --json kernel docs dialog --markdown ``` ## LLM assets Kernel publishes several machine-readable surfaces: - `llms.txt` in `@kernelui-lib/react` and `@kernelui-lib/elements` (shipped with npm) - [/llms.txt](/llms.txt) and [/llms-full.txt](/llms-full.txt) on the docs site - [/registry.json](/registry.json) — structured component catalog with shadcn aliases and migration caveats - `kernel docs --json` for local lookup Exact prop types always live in `dist/index.d.ts` inside each package. The registry and `llms.txt` files are maps, not the source of truth for types. --- # Migration from shadcn/Radix Kernel covers most of the same UI surface as shadcn/ui, but the APIs are not drop-in replacements. Many components are *structurally* different because Kernel wraps real native elements (``, ` — the OS renders the picker. - Custom portal/listbox Select from Radix usually maps to Combobox instead. - Use SelectOption (or real