Heading

Heading is used to render semantic HTML heading elements.

#

Import

Heading - The Heading component.

import { Heading } from "@dreamy-ui/react/rsc";

#

Usage

This is a simple Heading component.

<Heading>
  This is a simple Heading component.
</Heading>

#

Font sizes

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">
  <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>

Group

Icon