React Installation

Kelvin UI components are self-contained TypeScript files — there is no quickui package to install and no runtime dependency. You add components either with the shadcn CLI (which copies the source into your project) or by pasting the code from each component's Manual tab.

Requirements

  • React 18+ (React 19 recommended) with Next.js, Vite, or any JSX framework
  • Tailwind CSS v4 — the components are styled entirely with Tailwind utilities
  • TypeScript recommended; every component ships fully typed
Next.jsViteLaravelReact RouterAstroTanStack StartTanStack RouterManual
See all installation guides →

Option 1 — shadcn CLI (recommended)

Every component page shows its own command. The CLI fetches the component from this site's registry and writes the source files into your project:

npx shadcn@latest add button.json

The command respects your components.json configuration for paths and aliases. Components that depend on shared utilities (like cn) declare them, and the CLI installs those too.

Option 2 — copy & paste

  1. Open any component page and switch to the Manual tab.
  2. Copy the file into your project (e.g. components/ui/button.tsx).
  3. Install the icon dependency if the component uses it: npm i lucide-react.
  4. Some interactive components use framer-motion — install it when the source imports it.

Design tokens (required)

Every component draws its colors, radii, and fonts from CSS variables. Copy the token block from src/app/globals.css into your stylesheet — the :root, .dark, and @theme inline sections. That single file is your theme: change the palette or radius there and every component follows.

Key token groups:

  • --background / --foreground / --card / --border / --muted … — surfaces and ink
  • --primary — the petrol interactive color (buttons, links, focus rings)
  • --success / --warning / --info / --destructive — reserved status colors
  • --deep / --accent-bold — deep-blue surfaces and their electric accent (never use --accent-bold on light backgrounds)
  • --chart-1 … --chart-5 — CVD-validated data-series colors
  • --font-plex-sans / --font-plex-mono — IBM Plex, loaded via next/font

Typography

Kelvin UI is designed for IBM Plex Sans and IBM Plex Mono. With Next.js:

Loading...

Apply plexSans.className to <body> and both .variable classes so the token stacks resolve.

Dark mode

Components support dark mode through the .dark class convention (works with next-themes using attribute="class"). Kelvin UI is light-first — ship light as the default for corporate and technical products.

Next steps

  • Start with Button to verify your token setup
  • Browse Semiconductor & EDA for the components that make the library distinctive
  • Explore the Page Compositions for full catalog, checkout, and monitoring layouts