Header component for page sections.
| Name | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | — | Section title |
| description | string | — | Section description |
| Property | Token | CSS Variable | Description | |
|---|---|---|---|---|
| Title Size | fontSize.3xl | 1.875rem | Large heading | |
| Title Weight | fontWeight.bold | 700 | Bold weight | |
| Title Color | color.foreground | var(--foreground) | Default text | |
| Description Size | fontSize.lg | 1.125rem | Larger body text | |
| Description Color | color.muted-foreground | var(--muted-foreground) | Muted text | |
| Gap | spacing.2 | 0.5rem | Title-description gap |
Available size variants for different heading levels.
<SectionHeader as="h1" size="lg">Large Header</SectionHeader> <SectionHeader as="h2" size="md">Medium Header</SectionHeader> <SectionHeader as="h3" size="sm">Small Header</SectionHeader>
Add a description to provide additional context.
This section header includes a description to provide additional context
<SectionHeader as="h2" size="md" description="Manage your account settings and preferences" > Settings </SectionHeader>
Align headers left, center, or right.
Left-aligned header
Centered header with description
Right-aligned header
<SectionHeader align="left">Left Aligned</SectionHeader> <SectionHeader align="center">Center Aligned</SectionHeader> <SectionHeader align="right">Right Aligned</SectionHeader>
Use proper heading hierarchy (h1 → h2 → h3) for accessibility.
<SectionHeader as="h1" size="lg">Page Title</SectionHeader> <SectionHeader as="h2" size="md">Major Section</SectionHeader> <SectionHeader as="h3" size="sm">Subsection</SectionHeader>