Section Header
A marketing section lead-in — a mono uppercase eyebrow, a display-scale title, and an optional description.
- Status
- Since
0.1.0- Accessibility pattern
- heading with supporting text
Last updated
Platform
Ship agentic UI, fast.
Tokens, components, and a private registry — one system for humans and agents.
Install
Add Section Header from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.
pnpm dlx shadcn@latest add @vegastack/section-headerUsage
import { SectionHeader } from "@/components/ui/section-header";
<SectionHeader
eyebrow="Platform"
title="Ship agentic UI, fast."
description="Tokens, components, and a private registry — one system for humans and agents."
/>;Examples
Platform
Ship agentic UI, fast.
Tokens, components, and a private registry — one system for humans and agents.
Serif emphasis
Compose a serif-italic emphasis span for one word or phrase inside title — never the whole
headline. font-serif resolves to the Newsreader token; reserve it for display emphasis and
pull-quotes only (see Testimonial), never running body text.
01 / Platform
Built for agentic teams
<SectionHeader
title={
<>
Built for <em className="font-serif italic">agentic</em> teams
</>
}
/>Sizes
sm / md (default) / lg / xl map to the tokenized text-display-* ladder (32 / 40 / 56 /
72px, tracking baked in per step).
sm
Section header
md
Section header
lg
Section header
xl
Section header
Center alignment
Now shipping
One system, every surface.
Product and marketing share the same tokens — only the ground shifts.
Two-tone headline
Pass titleMuted to continue the headline at the same size/weight in muted-foreground —
hierarchy by color, not scale (the marketing signature: "Live from day one." + "Connect your
inbox and calendar.").
Self-building
Live from day one. Connect your inbox and calendar and the system builds itself around you.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title* | React.ReactNode | — | The section headline. Rendered at the tokenized display scale
(text-display-{size}, tracking baked in). Compose a serif-italic
emphasis span for ONE word/phrase per header — never the whole
headline — e.g.
<>Ship agentic UI, <em className="font-serif italic">fast</em>.</>.
font-serif resolves to the Newsreader token (--font-family-serif);
reserve it for display emphasis + pull-quotes only (never running body
text) per audit 17. |
align | "center" | "start" | 'start' | Text + flex alignment. |
description | React.ReactNode | — | Optional supporting copy under the title. |
eyebrow | React.ReactNode | — | Small mono uppercase label above the title (e.g. "01 / Platform",
"Now shipping"). Rendered in the mono voice (font-mono +
text-mono-label, uppercase, --alpha tracking baked into the token) —
uppercase is mono-EXCLUSIVE, never apply it to the title/description.
A single --brand dot precedes it — the sanctioned "eyebrow highlight"
marker role (audit 17-brand-direction §Color & surface); the text itself
stays neutral muted-foreground so the accent stays a marker, not a wash. |
size | "lg" | "md" | "sm" | "xl" | 'md' | Display scale — sm(32) / md(40) / lg(56) / xl(72), the tokenized
text-display-* ladder (tracking baked in per step). |
titleMuted | React.ReactNode | — | Two-tone continuation (Wave 4 — the teardown's signature headline move):
rendered AFTER title at the same size/weight in muted-foreground, so
hierarchy comes from color, not scale ("Live from day one." + "Connect
your inbox and calendar."). |
Data attributes and CSS variables on SectionHeader
| Attribute | Values |
|---|---|
data-align | mirrors a prop or state value |
data-slot | "section-header" | "section-header-description" | "section-header-eyebrow" | "section-header-eyebrow-mark" | "section-header-title" |
Accessibility
- The title renders as an
<h2>— placeSectionHeaderwhere an<h2>is the correct level for the page outline (it does not accept a level prop; wrap it or adjust the surrounding structure if a different level is required). - The eyebrow's
--brandmarker dot isaria-hidden— the eyebrow TEXT carries the meaning. - Uppercase is applied only to the mono eyebrow (
font-mono+text-mono-label) — never to the title or description (uppercase is mono-exclusive, audit 17-brand-direction).
| Contract | States tested |
|---|---|
| Behaviour | default |
| Accessibility | native-or-base-ui-semantics, browser-accessibility-test |
| Visual | default |