pnpm dlx dreamy add headingHeading renders semantic HTML heading elements (h1-h6) with consistent styling. Use it to create hierarchical page structure and improve accessibility.
This is a simple Heading component.
<Heading>
This is a simple Heading component.
</Heading>size (or textStyle) prop determines the semantic size of the heading. It changes font size, line height, letter spacing and font weight depending on the value.
Extra small
Small
Medium
Large
Extra large
2 Extra large
3 Extra large
4 Extra large
5 Extra large
6 Extra large
7 Extra large
<VStack w="full" align="start">
<Heading size="xs">Extra small</Heading>
<Heading size="sm">Small</Heading>
<Heading size="md">Medium</Heading>
<Heading size="lg">Large</Heading>
<Heading size="xl">Extra large</Heading>
<Heading size="2xl">2 Extra large</Heading>
<Heading size="3xl">3 Extra large</Heading>
<Heading size="4xl">4 Extra large</Heading>
<Heading size="5xl">5 Extra large</Heading>
<Heading size="6xl">6 Extra large</Heading>
<Heading size="7xl">7 Extra large</Heading>
</VStack>You can use as prop to change the HTML tag of the heading. The default tag is h2 for all sizes.
This is a Heading component with h1 tag.
This is a Heading component with h2 tag.
This is a Heading component with h3 tag.
<VStack w="full" align="start">
<Heading as="h1">
This is a Heading component with h1 tag.
</Heading>
<Heading as="h2">
This is a Heading component with h2 tag.
</Heading>
<Heading as="h3">
This is a Heading component with h3 tag.
</Heading>
</VStack>