M
MetricUI
UI

SectionHeader

Standalone section title with subtitle, description popover, action slot, and inline badge. For separating dashboard sections.

import { SectionHeader } from "metricui";

Use SectionHeader to visually separate groups of related content in a dashboard. It handles title styling, optional subtitles, contextual descriptions, action slots, and inline badges. Also available as MetricGrid.Section — a convenience wrapper that delegates to SectionHeader with automatic full-width grid span inside a MetricGrid.

Basic Example

Key Metrics

<SectionHeader title="Key Metrics" />

With Subtitle & Border

Add a subtitle for additional context and border for visual separation between sections.

Performance

Last 30 days compared to previous period

<SectionHeader
  title="Performance"
  subtitle="Last 30 days compared to previous period"
  border
/>

Description Popover

The description prop renders a “?” icon next to the title that shows a popover with contextual information on hover.

Revenue

All channels combined

<SectionHeader
  title="Revenue"
  subtitle="All channels combined"
  description="Revenue includes recurring subscriptions, one-time purchases, and professional services. Refunds are excluded."
/>

Action & Badge Slots

The action slot renders content right-aligned — perfect for links, buttons, or toggles. The badge slot renders inline after the title.

Recent Orders

3 new

Last 7 days

<SectionHeader
  title="Recent Orders"
  subtitle="Last 7 days"
  action={<button className="text-xs text-[var(--accent)]">View all</button>}
  badge={<Badge variant="info" size="sm">3 new</Badge>}
/>

Dense Mode

Enable dense for compact layouts. Title shrinks from 10px to 9px and subtitle from text-sm to text-xs. Falls back to the global config.dense setting from MetricProvider.

Normal

Performance

Last 30 days

Dense

Performance

Last 30 days

// Normal
<SectionHeader title="Performance" subtitle="Last 30 days" border />

// Dense
<SectionHeader title="Performance" subtitle="Last 30 days" border dense />

Props

PropTypeDescription
title*
string

Section title — rendered uppercase, tracked, accent-colored.

subtitle
string

Subtitle — rendered below title in muted text.

description
string | React.ReactNode

Description — renders as a "?" popover next to the title.

action
React.ReactNode

Action slot — rendered right-aligned. Buttons, links, toggles.

badge
React.ReactNode

Badge or status indicator — rendered inline after the title.

border
boolean

Bottom border for visual separation.

spacing
boolean

Top margin. Set false when you control spacing externally.

dense
boolean

Dense mode — smaller text. Falls back to config.dense.

className
string

Additional CSS class names for the root element.

classNames
{ root?: string; title?: string; subtitle?: string; action?: string }

Sub-element class overrides.

id
string

HTML id attribute.

data-testid
string

Test id.

Notes

  • Uses forwardRef — you can pass a ref to the root element.
  • MetricGrid.Section is a convenience wrapper that delegates to SectionHeader with automatic full-width grid span.
  • Title renders uppercase with tracking-widest and accent color by default.
  • Dense mode reduces title from 10px to 9px and subtitle from text-sm to text-xs.
  • spacing=true (default) adds mt-8 (or mt-4 in dense mode). Set spacing=false when you control spacing externally.

Playground

Experiment with every prop interactively. Adjust the controls on the right to see the component update in real time.

Live Preview

Revenue Overview

Monthly breakdown by region

Side-by-Side in a 2-Column Grid

Revenue

This month

Total
$0

Users

Active this month

Total
0

Dense Mode Comparison

Normal

Performance

Last 30 days

Dense

Performance

Last 30 days

Code

<SectionHeader
  title="Revenue Overview"
  subtitle="Monthly breakdown by region"
/>

Props

Adjust props to see the component update in real time