React Spec Selector

The picker that belongs in front of a comparison table. Search the catalog, add parts as chips, and the side-by-side diff rebuilds itself — with a hard cap, because a comparison table stops being readable past four columns.

ComparingKLV-7000KLV-5000

2/4

Specification	KLV-7000New Flagship	KLV-5000 Mainstream
Application cores	4	2
Max frequency	1600MHz	1000MHz
On-die SRAM	8MB	4MB
AES-GCM	Yes	Yes
ML-KEM accelerator	Yes	Yes
Side-channel hardening	Yes	No
Max ambient	85°C	85°C
Typical power	42W	19W
Unit price, 1k	214$	96$

Installation

npx shadcn@latest add "https://kelvinui.com/registry/spec-selector.json"

Props

Prop	Type	Description
catalog	CompareItem[]	Everything available to compare
rows	CompareRow[]	Spec rows, { key, label, unit? }
defaultSelected	string[]	Ids selected on mount (defaults to the first two)
maxItems	number	Column cap (default 4)

Composition

This component does not re-implement the table — it renders Comparison Table with the selection, exactly as Parametric Search composes Advanced Table. It shares CompareItem and CompareRow, so the same catalog data drives both, and the differences-only toggle comes along for free.

tsx

import ComparisonTable, {
type CompareItem,
type CompareRow,
} from "../comparison-table/comparison-table";

// …selection state…

<ComparisonTable items={chosen} rows={rows} allowDiffFilter />

Install comparison-table first — the CLI does not pull transitive component dependencies for you.

Below two selections the table is replaced with a prompt rather than rendered with one column, because a one-column "comparison" reads as a bug.

React Spec Selector Copy Page

Installation

Props

Composition

React Spec Selector