build69
Sign inGet API key
build69  /  Components  /  Page Structure  /  DetailHead

DetailHead

v1.0.8Updated 27 Aug 2026

Header for record detail pages: title + key meta fields + status + tabs + actions. Pairs with KVList for the body.

View source← Back to catalog

Preview

Live · 14 stories
DefaultOpen ↗
▸Why this is recommendeddetailheaderrecordmeta+1

The default, out-of-the-box DetailHead.

Recommended for+14
  • ✓Top of every record detail page
  • ✓Customer / invoice / employee profiles
Tags+6
detailheaderrecordmetadefault
Features+4
  • Title + subtitle + status badge
  • Key-value meta row
  • Action button group
  • Tabs slot below header
  • Breadcrumb
  • Avatar / icon slot
  • i18n: labels prop overrides every built-in UI string (breadcrumb/edit-title/overflow aria, statusTone fallback pills) — see DetailHeadLabels / DEFAULT_DETAIL_HEAD_LABELS
Not recommended for−2
  • ✕List pages (use PageHead)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "DetailHead" })

Usage

import { DetailHead } from '@/components/patterns/detail-head';

<DetailHead title="INV-2025-0042" status={<Badge>PAID</Badge>} meta={metaItems} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
title

Record title

stringyes
status

Status badge

ReactNode—
meta

Key-value meta row

MetaItem[]—
actions

Action button group

ReactNode—
labels

Override any built-in UI string — breadcrumb/edit-title/overflow aria and the statusTone fallback pills (i18n). Merged over DEFAULT_DETAIL_HEAD_LABELS.

Partial<DetailHeadLabels>—

Related

Platform docsAll componentsSource files