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.

Default

my-project.acme.com

Active

Region

us-east-1

Created

May 31, 2026

Owner

alice@acme.com

Plan

Pro

Custom Title Node

api.acme.com

Healthy

Uptime (30d)

99.98%

Avg latency

42 ms

Requests today

3.1 M

inference-endpointv2.1.4

Degraded

Model

mixtral-8x7b

GPU

A100 80 GB

Replicas

Queue depth

Many Actions

sample-dataset-2026.parquet

Unpinned

Format

Parquet

Rows

1,240,000

Size

48.3 MB

Uploaded

Yesterday at 14:22

Meta Grid Standalone

Build details

Commit

a3f9c12

Branch

main

Duration

1m 42s

Triggered by

push

Deployment info

Status

Live

Region

eu-west-1

CDN

Edge

Instances

Memory

512 MB

CPU

0.25 vCPU

Two-column layout

Workspace

acme-org

Tier

Enterprise

Seats used

24 / 50

Renewal

Jan 1, 2027

No Meta

API Keys

3 active

Audit Log

Webhooks

Rich Meta Values

data-pipeline-v3

Running

Environment

production

Health

Healthy

Last run

2 min ago

Events / hr

12,483

Error rate

0.4%

Owner

data-eng@acme.com

With Status Badges

report-active.csv

Active

Status

Active

Size

2.4 MB

Updated

Today at 09:41

report-pending.csv

Pending

Status

Pending

Size

2.4 MB

Updated

Today at 09:41

report-failed.csv

Failed

Status

Failed

Size

2.4 MB

Updated

Today at 09:41

report-archived.csv

Archived

Status

Archived

Size

2.4 MB

Updated

Today at 09:41

report-draft.csv

Draft

Status

Draft

Size

2.4 MB

Updated

Today at 09:41

Installation

npx shadcn@latest add @byronwade/detail-header

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.