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 "http://localhost:3000/registry/product-header.json"

Usage

Loading...

Props

PropTypeDefaultDescription
pnstring—Part number, mono petrol
namestring—Product title
lifecycleLifecycle—Badge next to the PN
chipsstring[][]Mono chips (rev, node)
metastring—Mono meta line
breadcrumbsCrumb[]—Trail above the title
actionsReact.ReactNode—Right-aligned CTA cluster
tabsstring[]—Section tab row
onTabChange——Tab selection

New components every week

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