React Product Header
The top of every part page: a breadcrumb trail into the catalog, the mono part number with its lifecycle badge and revision/node chips, a one-line description, the mono meta line (package · grade · temp range · MOQ), a right-aligned action cluster, and the section tab row (Overview / Specifications / Documentation…) with the primary underline. Composes with Spec Sheet, Pinout, and Comparison Table to complete a product detail page.
AXM-330-256IACTIVERev C16nm
AXM-330 SoC Platform — Industrial
Quad Cortex-A53 application platform with LPDDR4-3200, PCIe Gen3, and a silicon-proven 16nm implementation.
FCBGA-256 · Industrial · −40…+105 °C · MOQ 90
Overview content area
Installation
Depends on breadcrumbs and product-card (LifecycleBadge).
npx shadcn@latest add product-header.json
Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| pn | string | — | Part number, mono petrol |
| name | string | — | Product title |
| lifecycle | Lifecycle | — | Badge next to the PN |
| chips | string[] | [] | Mono chips (rev, node) |
| meta | string | — | Mono meta line |
| breadcrumbs | Crumb[] | — | Trail above the title |
| actions | React.ReactNode | — | Right-aligned CTA cluster |
| tabs | string[] | — | Section tab row |
| onTabChange | — | — | Tab selection |