Skip to Content

Heading

A semantic heading component for titles and section headers. Supports multiple sizes and semantic HTML levels (h1-h6) for proper document structure and accessibility.

Hello.

Sizes

Heading sm

Heading base

Heading lg

Heading xl

Heading 2xl

Heading 3xl

Heading 4xl

Heading 5xl

Heading 6xl

Heading 7xl

Heading 8xl

Heading 9xl

Component props

Heading extends Text and accepts all Text props. Default values are size="2xl", weight="semibold", and spacing="tight".

NameTypeValues
sizeResponsive<HeadingSize>"sm" | "base" | "lg" | "xl" | "2xl" | ... | "9xl"
asHeadingElement"h1" | "h2" | "h3" | "h4" | "h5" | "h6" (default: "h2")