---
title: Heading
description: Used to render semantic HTML heading elements.
---

<ExampleTabs name="heading-basic" />

## Usage

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

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

## Examples

### Sizes

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

<ExampleTabs name="heading-with-sizes" />

### Highlight

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

<ExampleTabs name="heading-with-highlight" />

### As another element

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

<ExampleTabs name="heading-with-as-prop" />

### Weights

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

<ExampleTabs name="heading-with-weights" />

### Composition

Use the `Heading` component to compose other components.

<ExampleTabs name="heading-with-composition" />

## 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.

```tsx title="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.

```tsx title="provider.tsx"
import { createSystem, defineRecipe } from "@chakra-ui/react"
import { defaultConfig } from "@chakra-ui/react"

const headingRecipe = defineRecipe({
  variants: {
    size: {
      custom: {
        fontSize: "100px",
        lineHeight: "100px",
        letterSpacing: "-2px",
      },
    },
  },
})

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

Then, use the `custom` variant to create a custom size.

```tsx
<Heading size="custom">I'm a custom size</Heading>
```

## Props

<PropTable component="Heading" part="Heading" />
