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 "http://localhost:3000/registry/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

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.