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 product-card.json

Usage

Loading...

Props

PropTypeDefaultDescription
pnstringPart number, mono
namestringProduct name
descriptionstringTwo-line clamped description
lifecycle'active' \'preview' \'nrnd' \
specs{ label, value }[][]Key-spec list
price / priceNotestringPrice + volume note
stockstringAvailability line
footerAction slot

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