Section Heading
The eyebrow/title/subtitle block that opens a section, and the larger first-page hero version.
Features
Everything a real product needs
Not a component playground: a system built to ship actual screens.
titleAs is about outline, not size
The title always looks like a section heading; titleAs only changes which tag it renders. Set it so the page's heading levels nest properly — a section inside an h2 should use h3, regardless of how big it looks.
Left-aligned
Browse everything
114+ components and 41 blocks, organized by category.
First-page hero
FirstPageHeading is the bigger, once-per-page version, with slots for CTAs and an avatar stack for social proof. Each of those is opt-in by presence rather than a toggle.
v0.3.3 is out
Design and engineering, finally on the same page.
114+ components and 41 blocks, matching your Figma file exactly.
AKDOPR
21.3K happy users
SectionHeading props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | The heading itself. | |
| eyebrow | string | Small pill above the title. Omit to hide it. | |
| subtitle | string | Supporting line below. | |
| align | 'center' | 'left' | 'center' | Left reads better when the content under it is also left-aligned. |
| titleAs | 'h1' | 'h2' | 'h3' | 'h4' | 'h2' | Tag for the title. Change it to keep the document outline correct, not to change the size. |
FirstPageHeading props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | Hero headline. | |
| description | string | Supporting paragraph. | |
| badgeLabel | string | Pill above the title. Its presence is what renders the badge. | |
| primaryCta / secondaryCta | { label: string; onClick?: () => void } | The two buttons. | |
| avatars | AvatarGroupProps['avatars'] | A non-empty array renders the overlapping social-proof stack. | |
| avatarsCaption | string | Caption under that stack, e.g. "21.3K happy users". | |
| align | 'center' | 'left' | 'center' | Hero alignment. |