UI ComponentsTypography
Heading
Apply theme heading styles independently of semantic level.
Import
import { Heading } from "@puzzle-ui/ui";Visual and semantic hierarchy
level selects typography; as selects the HTML heading level. The default element is always h2, regardless of visual style.
Text alignment
Use textAlign to align heading text. Logical values start and end follow
the text direction.
When omitted, alignment inherits normally or follows style.textAlign.
An explicit textAlign prop takes precedence over style.textAlign; other
inline styles are preserved.
API
| Prop | Type | Default | Description |
|---|---|---|---|
level | "display1" | "display2" | "headline1" | "headline2" | "headline3" | "headline4" | Required | Theme typography role. |
as | ElementType | "h2" | Semantic element. |
children | ReactNode | - | Heading content. |
textAlign | CSSProperties["textAlign"] | - | CSS text alignment, including left, center, right, justify, start, and end. |
Native attributes, styles, classes, and refs for the chosen element are forwarded. Follow a logical heading hierarchy; do not choose semantic levels solely for appearance. Responsive typography comes from the active theme.