Heading is used to render semantic HTML heading elements.



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


Heading composes Box so you can use all the style props and add responsive styles as well. It renders an <h2> tag by default.

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

Changing visual size#

To increase the visual size of the heading, use the size props. This property ensures that the heading size automatically adjusts for smaller screens.

<Stack spacing={6}>
<Heading as='h1' size='4xl' noOfLines={1}>
(4xl) In love with React & Next
<Heading as='h2' size='3xl' noOfLines={1}>
(3xl) In love with React & Next
<Heading as='h2' size='2xl'>
(2xl) In love with React & Next
<Heading as='h2' size='xl'>
(xl) In love with React & Next
<Heading as='h3' size='lg'>
(lg) In love with React & Next
<Heading as='h4' size='md'>
(md) In love with React & Next
<Heading as='h5' size='sm'>
(sm) In love with React & Next
<Heading as='h6' size='xs'>
(xs) In love with React & Next

Truncate heading#

If you'd like to truncate the heading after a specific number of lines, pass the noOfLines prop. This will render an ellipsis when the heading exceeds the width of the viewport or maxWidth prop.

<Heading noOfLines={1}>
Basic text writing, including headings, body text, lists, and more.

Override style#

You can override the size of the Heading component by passing the fontSize prop. No need to write css or styled().

<Heading size='lg' fontSize='50px'>
I'm overriding this heading


<Box maxW='32rem'>
<Heading mb={4}>Modern online and offline payments for Africa</Heading>
<Text fontSize='xl'>
Paystack helps businesses in Africa get paid by anyone, anywhere in the
<Button size='lg' colorScheme='green' mt='24px'>
Create a free account
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel