A collection of composable header primitives for item detail pages — navigation bar, title/meta layout, cover image, and project meta grid.

ItemHeaderBlocks exports five composable components that together build a full item-detail page header. They are designed to be stacked: ItemHeaderBlocks provides the top navigation bar, ItemHeaderLayout renders the title and right-hand metadata columns, and CoverImageBlock / ProjectMetaBlock fill in visual and project-context sections.

Installation

npx shadcn@latest add @adv/item-header-blocks

Usage

import {
  ItemHeaderBlocks,
  ItemHeaderLayout,
  CoverImageBlock,
} from '@/components/ui/ItemHeaderBlocks';

<ItemHeaderBlocks
  defaultBackPath="/work"
  backButtonText="Back to work"
  breadcrumb={[{ label: 'Acme' }, { label: 'Case Study' }]}
  rightSideContent="Published Jan 2025"
>
  <ItemHeaderLayout
    title="Redesigning the checkout flow"
    subtitle="A four-week sprint to cut drop-off by 30%."
    role="Product Designer"
    projectType="Product Design"
    stage="Shipped"
    timeline="4 weeks"
    deliverables={['Research', 'Prototypes', 'Final spec']}
  />
  <CoverImageBlock image="/cover.jpg" />
</ItemHeaderBlocks>

Example

Acme Corp

Case Study

Jan 2025

Redesigning the checkout flow

A four-week sprint to cut drop-off by 30%.

ROLE

Product Designer

PROJECT TYPE

Product Design

STAGE

Shipped

TIMELINE

4 weeks

`ItemHeaderBlocks`

Top navigation bar with optional back button, breadcrumb, and right-side content slot.

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content rendered below the nav bar.
`className`	`string`	`""`	Extra classes on the outer wrapper.
`rightSideContent`	`ReactNode`	—	Content rendered in the top-right area (e.g. publish date).
`backButtonText`	`string`	—	Label for the back button. Renders no back button if omitted.
`defaultBackPath`	`string`	—	Fallback path for the back button. Renders no back button if omitted.
`backButtonId`	`string`	—	`id` passed to the inner `BackButton`.
`breadcrumb`	`BreadcrumbItem[]`	—	Array of `{ label, icon? }` items rendered as a breadcrumb pill.

`ItemHeaderLayout`

Title block with a right-hand metadata column grid.

Prop	Type	Default	Description
`title`	`ReactNode`	—	Main heading. Required.
`subtitle`	`string`	—	Subheading below the title.
`role`	`string`	—	Displays under "ROLE".
`projectType`	`string`	—	Displays under "PROJECT TYPE".
`stage`	`string`	—	Displays under "STAGE".
`timeline`	`string`	—	Displays under "TIMELINE".
`deliverables`	`string[]`	—	List of deliverables shown under "DELIVERABLES".

`CoverImageBlock`

Full-width background-image banner. Renders nothing if image is omitted.

Prop	Type	Default	Description
`image`	`string`	—	URL of the cover image.

`ProjectMetaBlock`

Legacy grid of project type, stage, and deliverables — kept for back-compat with older detail pages.

Prop	Type	Default	Description
`stage`	`string`	—	Project stage label.
`deliverables`	`string[]`	—	List of deliverable strings.
`projectType`	`string`	—	Project type label.

`ItemHeaderBlocksWithNavigation`

Convenience wrapper around ItemHeaderBlocks that exposes backPath instead of defaultBackPath (sugar for static page use).

Prop	Type	Default	Description
`backPath`	`string`	—	Forwarded as `defaultBackPath` on `ItemHeaderBlocks`.
`backButtonText`	`string`	—	Label for the back button.
`breadcrumb`	`BreadcrumbItem[]`	—	Breadcrumb items.
`rightSideContent`	`ReactNode`	—	Top-right content slot.
`children`	`ReactNode`	—	Forwarded children.
`className`	`string`	—	Extra classes.

Item Header Blocks