Heading
Semantic h1–h6 with a level-driven size and weight scale.
import { Heading } from "@ps1ui/core";Levels
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<Heading level={1}>Heading 1</Heading>
<Heading level={2}>Heading 2</Heading>
<Heading level={3}>Heading 3</Heading>
<Heading level={4}>Heading 4</Heading>
<Heading level={5}>Heading 5</Heading>
<Heading level={6}>Heading 6</Heading>Size override
Looks like an h1, stays an h2
<Heading level={2} size="3xl">
Looks like an h1, stays an h2
</Heading>Responsive size
Scales up at the md breakpoint
<Heading level={2} size={{ base: "xl", md: "3xl" }}>
Scales up at the md breakpoint
</Heading>Props
| Prop | Type | Default | Description |
|---|---|---|---|
level* | 1 | 2 | 3 | 4 | 5 | 6 | — | Semantic level: renders the matching h1–h6 tag and sets the default size and weight. |
as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | — | Heading tag to render when it should differ from level — visual defaults stay driven by level. |
size | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | — | Font size. Defaults to the level's size. |
weight | "regular" | "medium" | "semibold" | "bold" | — | Font weight. Defaults to the level's weight. |
Also accepts the attributes of the element rendered via as; ref is not supported.