React Product Configurator
Option groups that resolve to a live configuration — running price, derived specs, and a generated orderable part number. Each option can contribute a price delta, a part-number fragment, and spec overrides, so the summary panel always reflects exactly what the buyer has built.
Configure AES Crypto Core
Every choice updates the price, specs, and orderable part number.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| productName | string | Shown in the heading |
| basePrice | number | Starting price before option deltas |
| groups | ConfigGroup[] | { id, label, help?, options } |
| partPrefix | string | Prefix for the generated part number |
| currency | string | Currency symbol (default "$") |
| cta | { label, href } | Summary-panel button |
| onChange | (selection: Record<string,string>) => void | Fires on every option change |
Each ConfigOption is { value, label, priceDelta?, code?, specs?, note?, disabled? }. The code fragments join into the part number in group order; specs merge into the summary, so later groups can override earlier ones.
Pair it with Part Number Builder so customers can decode the code they were given.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.