House components · Application UI
Detail Header
A resource detail page header that renders a title row with an optional badge and action buttons, followed by a responsive grid of label-over-value metadata columns.
Feature showcase
Installation
Features
7 examples
Default, Custom Title Node, Many Actions, Meta Grid Standalone, No Meta, Rich Meta Values, With Status Badges.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | React.ReactNode | - | The primary heading displayed in monospace font at the top of the header. |
| badge | React.ReactNode | undefined | Optional badge element rendered inline next to the title. |
| actions | React.ReactNode | undefined | Optional action buttons or controls rendered on the right side of the title row. |
| meta | { label: string; value: React.ReactNode }[] | undefined | Array of label/value pairs rendered as a responsive metadata grid below the title. |
| className | string | undefined | Additional CSS classes applied to the root wrapper element. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/detail-header.tsx |
| Default example | content/examples/detail-header/default.tsx |
| Custom Title Node example | content/examples/detail-header/custom-title-node.tsx |
| Many Actions example | content/examples/detail-header/many-actions.tsx |
| Meta Grid Standalone example | content/examples/detail-header/meta-grid-standalone.tsx |
| No Meta example | content/examples/detail-header/no-meta.tsx |
| Rich Meta Values example | content/examples/detail-header/rich-meta-values.tsx |
| With Status Badges example | content/examples/detail-header/with-status-badges.tsx |