React Kelvin UI

Enterprise React components for science & engineering platforms. Built with Tailwind CSS v4, TypeScript, and IBM Plex — in the restrained visual language of industrial software.

"If you cannot measure it, you cannot improve it." — Lord Kelvin

What is Kelvin UI?

Kelvin UI is a component library for teams building the serious side of the web — in semiconductors, physics, chemistry, biotech, space, and computing: EDA and lab tooling, fab and mission dashboards, product catalogs, corporate sites, and B2B SaaS. It pairs every standard building block — buttons, tables, modals, navbars — with components no general-purpose library ships:

  • Waveform viewers with WaveDrom-style notation and a cycle cursor
  • Register maps in the manner of IP-XACT / CMSIS-SVD, with bitfield diagrams
  • Terminal consoles that behave like a UART bring-up session
  • Operations dashboards in the style of MES and fab-monitoring software
  • Corporate mega menus and navbars, including the deep-blue double-row pattern

Every component is a self-contained .tsx file you own outright. Copy it, or install it with the shadcn CLI — no runtime dependency, no lock-in.

Design principles

  • Light-first — white surfaces are the primary theme; dark derives from the same tokens.
  • Sharp and flat — 4px corners, hairline borders, no gradients, no glassmorphism.
  • Deep-blue ink, petrol interaction — text is #000028, interactive elements are vibrant petrol; an electric accent is reserved for deep surfaces.
  • Numbers are data — monospaced, tabular numerals wherever digits align or refresh.
  • State is never color alone — every status pairs a dot or icon with a label; chart palettes are validated for color-vision deficiency.
  • Visible focus — every interactive element ships a keyboard focus ring.

Getting started

Add any component to your project with the CLI — the command below installs the Button, and every component page has its own:

npx shadcn@latest add button.json

Prefer copy-paste? Each page's Manual tab shows the complete source. Paste the file into your project, and make sure the design tokens from globals.css are in your stylesheet — every component draws from them.

What's next

  • Browse the sidebar — start with the Semiconductor & EDA and Dashboard & Data sections
  • Explore the Page Compositions for full catalog, checkout, and monitoring layouts
  • Install any component with the CLI, or copy its source from the Code tab