heading

as
Not required
("h1" | "h2" | "h3" | "h4" | "h5" | "h6")
Changes the underlying tag while retaining the styles from the given `level`.
level
Not required
(1 | 2 | 3 | 4 | 5 | 6)
color
Not required
string
A Tailwind-style text color such as `red-400`.
className
Not required
string
children
Not required
node

A semantic heading component with consistent typography sizing and styling.

Basic heading usage

Heading with custom semantic level

Occasionally, a design will have a heading level that doesn't match the semantic level of the heading. In this case, use the as prop.

Heading with custom colors

Heading with custom styling