Heading
Markdown for agentsSemantic heading (h1-h6) with a safe default scale and an optional visual-size override.
npx slipstream-ui@latest add headingLevels
Heading one — page title
Heading two — section
Heading three — sub-section
Heading four — block
Heading five — group
Heading six — label
Visual size override + muted
h4 semantics, 2xl visual size
h2 semantics, small muted visual
h3 semantics at lg size
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | required | Semantic level — renders the matching h1..h6 element. |
| size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | — | Visual size override, independent of the semantic level. |
| muted | boolean | false | Use the muted-foreground token instead of the primary text color. |
Accessibility
- Renders real h1..h6 elements — indexable by find-in-page and outline panes.
- One h1 per page; never skip levels (use size for visual weight instead).
- Muted tone uses --muted-foreground (AA in both themes).
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.