Heading

Used to render semantic HTML heading elements.

The quick brown fox jumps over the lazy dog

<Heading>The quick brown fox jumps over the lazy dog</Heading>

Examples

Sizes

Use the size prop to change the size of the heading component.

Heading (sm)

Heading (base)

Heading (lg)

Heading (xl)

Heading (2xl)

Heading (3xl)

Heading (4xl)

Heading (5xl)

Heading (6xl)

<div className="flex flex-col gap-2">
  <Heading size="sm">Heading (sm)</Heading>
  <Heading size="base">Heading (base)</Heading>
  <Heading size="lg">Heading (lg)</Heading>
  <Heading size="xl">Heading (xl)</Heading>
  <Heading size="2xl">Heading (2xl)</Heading>
  <Heading size="3xl">Heading (3xl)</Heading>
  <Heading size="4xl">Heading (4xl)</Heading>
  <Heading size="5xl">Heading (5xl)</Heading>
  <Heading size="6xl">Heading (6xl)</Heading>
</div>

Highlight

Compose the Heading component with the Highlight component to highlight text.

Create accessible React apps with speed

Hygge UI is a simple, modular and accessible component library that gives you the building blocks you need.

<div>
  <Heading size="3xl">
    <Highlight
      query="with speed"
      text="Create accessible React apps with speed"
      colorPalette="teal"
    />
  </Heading>
  <Text>
    Hygge UI is a simple, modular and accessible component library that gives
    you the building blocks you need.
  </Text>
</div>

Composition

Use the Heading component to compose other components.

Modern payments for Stores

PayMe helps startups get paid by anyone, anywhere in the world

<div>
  <Heading size="2xl">Modern payments for Stores</Heading>
  <Text className="mb-2">
    PayMe helps startups get paid by anyone, anywhere in the world
  </Text>
  <Button>
    Create account <LuArrowRight size={16} />
  </Button>
</div>