React Product Detail Page
The whole part page, assembled. ProductHeader sits on top with breadcrumbs, the mono part number, lifecycle + process chips, and a section tab row — and those tabs actually drive the panel below, switching between Overview, Specifications (a live SpecSheet), Ordering (volume price breaks), and Documents. Alongside runs a sticky buy box whose unit price steps down as you raise the quantity across the volume breaks, and the page closes with a related-parts grid of ProductCards. Click the header tabs, and change the quantity in the buy box to watch the price move.
AXM-330 Application SoC — Industrial
Quad Cortex-A53 application platform, silicon-proven on 16nm, built for industrial gateways and edge compute.
FCBGA-256 · Industrial · −40…+105 °C · RoHS / REACH
Overview
The AXM-330 pairs a quad-core application cluster with a deterministic real-time domain, hardware security, and a rich connectivity set — a single-chip platform for industrial gateways, protocol converters, and edge inference nodes.
Key features
- Quad Arm Cortex-A53 @ 1.2 GHz with 512 KB shared L2
- Hardware crypto (AES-256, SHA-2, TRNG) with secure boot
- Dual Gigabit Ethernet with IEEE 1588 timestamping
- −40 to +105 °C industrial junction range, AEC-Q100 in progress
Related parts
AXM-550 SoC — Safety
Adds a lock-step Cortex-R52 safety island with ASIL-D work products.
- Package
- FCBGA-676
- Safety
- ASIL-D ready
AXM-110 SoC — Entry
Dual-core entry platform for cost-sensitive designs.
- Package
- QFN-48
- Max freq
- 800 MHz
PMU-12C Companion PMIC
12-rail power-management IC matched to the AXM-330 power tree.
- Rails
- 12
- Package
- QFN-24
Installation
Composition
| Piece | Source | Role |
|---|---|---|
| ProductHeader | product-header | Breadcrumbs, PN/lifecycle chips, actions, section tabs |
| SpecSheet | spec-sheet | The Specifications panel (Min/Typ/Max groups, footnotes) |
| ProductCard | product-card | Related-parts grid |
| Button | button | Header actions, downloads, buy box |
| Buy box | inline | Volume-break pricing derived from quantity |
The header's onTabChange sets a local tab state that selects the panel; the buy box holds quantity and derives the unit price from the volume breaks. Everything else is presentational — replace the demo part, specs, and price breaks with your catalog data.
Usage
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.