Heading

Used to render semantic HTML heading elements.

The quick brown fox jumps over the lazy dog

import { Heading } from "@chakra-ui/react"

const Demo = () => {
  return <Heading>The quick brown fox jumps over the lazy dog</Heading>
}

Usage

import { Heading } from "@chakra-ui/react"

<Heading>I'm a Heading</Heading>

Examples

Sizes

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

Heading (sm)

Heading (md)

Heading (lg)

Heading (xl)

Heading (2xl)

Heading (3xl)

Heading (4xl)

Heading (5xl)

Heading (6xl)

import { Heading, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="2" align="flex-start">
      <Heading size="sm">Heading (sm)</Heading>
      <Heading size="md">Heading (md)</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>
    </Stack>
  )
}

Highlight

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

Create accessible React apps with speed

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

import { Heading, Highlight, Stack, Text } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <Heading size="3xl" letterSpacing="tight">
        <Highlight query="with speed" styles={{ color: "teal.600" }}>
          Create accessible React apps with speed
        </Highlight>
      </Heading>
      <Text fontSize="md" color="fg.muted">
        Chakra UI is a simple, modular and accessible component library that
        gives you the building blocks you need.
      </Text>
    </Stack>
  )
}

As another element

Use the as prop to render the heading as another HTML element.

Level 1

Level 2

Level 3

import { Heading, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <Heading as="h1">Level 1</Heading>
      <Heading as="h2">Level 2</Heading>
      <Heading as="h3">Level 3</Heading>
    </Stack>
  )
}

Weights

Use the fontWeight prop to change the weight of the heading component.

Normal

Medium

Semibold

Bold

import { Heading, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack>
      <Heading fontWeight="normal">Normal</Heading>
      <Heading fontWeight="medium">Medium</Heading>
      <Heading fontWeight="semibold">Semibold</Heading>
      <Heading fontWeight="bold">Bold</Heading>
    </Stack>
  )
}

Composition

Use the Heading component to compose other components.

Modern payments for Stores

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

import { Button, Heading, Stack, Text } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"

const Demo = () => {
  return (
    <Stack align="flex-start">
      <Heading size="2xl">Modern payments for Stores</Heading>
      <Text mb="3" fontSize="md" color="fg.muted">
        PayMe helps startups get paid by anyone, anywhere in the world
      </Text>
      <Button>
        Create account <LuArrowRight />
      </Button>
    </Stack>
  )
}

Customization

To override the fontSize, we recommend using the textStyle prop since it considers the line height and letter spacing as well.

Base style

Here's an example of customizing the Heading component.

provider.tsx

import { createSystem, defineRecipe } from "@chakra-ui/react"
import { defaultConfig } from "@chakra-ui/react"

const headingRecipe = defineRecipe({
  base: {
    fontWeight: "normal",
    textStyle: "4xl",
  },
})

const system = createSystem(defaultConfig, {
  theme: {
    recipes: { heading: headingRecipe },
  },
})

Custom Size

Update the variants.size property to create a custom size.