SectionHeader

stable

The canonical section header — composes SectionEyebrow + a bright-span heading + Text. One component for every section intro.

shell

pnpm dlx shadcn@latest add @webzenia/section-header

preview

Composed primitive

A heading with a bright span

Eyebrow + heading + lead, all from the type system.

props

eyebrowReactNode

Eyebrow text. Omit to skip the row.

eyebrowVariantpill | rule | plain= plain

Eyebrow treatment.

headingstring

Supports **bright** markers for the sheen emphasis.

headingAsh1 | h2 | h3= h2

Heading level — keep document order correct.

leadstring

Supporting line below the heading.

alignleft | center= left

Alignment.

accessibility

Set headingAs to preserve heading hierarchy (one h1 per page).

The bright span is decorative emphasis — it does not change meaning for a screen reader.

usage

tsx

import { SectionHeader } from "@/components/ui/section-header"

<SectionHeader
  eyebrow="Foundations"
  eyebrowVariant="rule"
  heading="The tokens everything is **built** from"
  lead="One supporting line."
/>