Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
Sponsor

Heading

Used to render semantic HTML heading elements.

The quick brown fox jumps over the lazy dog

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)

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.

As another element

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

Level 1

Level 2

Level 3

Weights

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

Normal

Medium

Semibold

Bold

Composition

Use the Heading component to compose other components.

Modern payments for Stores

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

Props

PropDefaultType
colorPalette 'gray'
'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'cyan' | 'purple' | 'pink' | 'accent'

The color palette of the component

size 'xl'
'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl'

The size of the component

Previous

Em

Next

Highlight