React Product Card

The catalog unit for technical products: part number in mono petrol, a lifecycle badge from the exported set (ACTIVE / PREVIEW / NRND / EOL — the vocabulary of every semiconductor catalog), a key-spec list with right-aligned tabular values, a price row with volume note and stock count, and an action slot for "Add to RFQ" or datasheet links. The demo shows the three states that matter: an active part with pricing, a preview part sampling next quarter, and an EOL part pointing at its replacement.

AXM-330-256IACTIVE

AXM-330 SoC — Industrial

Quad Cortex-A53 application platform, silicon-proven on 16nm.

Max frequency
1.2 GHz
Package
FCBGA-256
Junction range
−40…+105 °C
Flash
2 MB
$38.40@ 1k units4,213 in stock
AXM-550-676APREVIEW

AXM-550 SoC — Safety

Adds a lock-step Cortex-R52 safety island with ASIL-D work products.

Max frequency
1.2 GHz
Package
FCBGA-676
Junction range
−40…+125 °C
Safety
ASIL-D ready
Sampling Q4 2026
AXM-110-48CEOL

AXM-110 SoC — Entry

Dual-core entry platform. Not recommended for new designs.

Max frequency
800 MHz
Package
QFN-48
Last-time buy
2027-03-31
Replacement
AXM-330
Lifecycle set:ACTIVEPREVIEWNRNDEOL

Installation

npx shadcn@latest add "http://localhost:3000/registry/product-card.json"

Usage

Loading...

Props

PropTypeDefaultDescription
pnstring—Part number, mono
namestring—Product name
descriptionstring—Two-line clamped description
lifecycle'active' \'preview' \'nrnd' \
specs{ label, value }[][]Key-spec list
price / priceNotestring—Price + volume note
stockstring—Availability line
footer——Action slot

LifecycleBadge is exported standalone — use it in tables, detail headers, and comparison columns so lifecycle reads identically everywhere.

New components every week

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