React Marketing Sections

The landing page, unbundled into installable blocks. HeroSection, StatsBand, FeatureBento, and CtaSection are each prop-driven and standalone — stack them for a full page (as previewed) or drop a single one into an existing marketing site. All four hold the house line: light-first, sharp corners, hairline borders, mono numerals in the stats band, and no gradients or glass, so the marketing surface matches the product it's selling.

OPEN SOURCE · MIT

Enterprise UI forscience & engineering products

A React component library in the visual language of industrial software — waveform viewers, register maps, and operations dashboards alongside every standard building block. Light-first, sharp-cornered, token-driven.

200+
Components
14
Categories
100%
TypeScript
0
Runtime deps

WHY KELVIN

Built for technical products, not landing pages

Every block follows the same house rules, so a datasheet, a dashboard, and a checkout all read as one system.

Instrument-grade data display

Waveforms, spectra, gauges, and spec sheets with tabular mono numerals and CVD-safe chart colors — the components technical software actually needs.

Semiconductor & EDA

Register maps, pinouts, memory maps, and an IP-XACT builder.

Accessible by default

Visible focus rings, state never by color alone, keyboard-first.

Token-driven theming

One set of CSS variables drives light and dark; no gradients, no glass.

Unit-aware inputs

SI-prefix parsing, quantity formatting, and ± uncertainty out of the box.

Full page compositions

Catalog, product detail, checkout, and monitoring pages assembled and ready.

Ship your technical product in one visual language

Copy-paste components with the CLI, own the source, and keep every surface consistent.

Installation

npx shadcn@latest add marketing-sections.json

The blocks

ExportPurpose
HeroSectionEyebrow, headline + primary-color highlight, subtitle, two CTAs, optional right-hand visual slot
StatsBandA divided row of big mono numbers with labels and optional units
FeatureBentoEyebrow / title / subtitle over a feature grid; mark one tile wide for the bento lead
CtaSectionA quiet, bordered closing call-to-action with up to two buttons

Usage

Loading...

Pass a live component into the hero's visual prop — a Waveform, a MetricCard, a Gauge — to show the product doing real work above the fold.