Heading is used to render semantic HTML heading elements.


import { Heading } from "@recastui/react";


Editable Example
<Heading order={1}>This is h1 title</Heading>
<Heading order={2}>This is h2 title</Heading>
<Heading order={3}>This is h3 title</Heading>
<Heading order={4}>This is h4 title</Heading>
<Heading order={5}>This is h5 title</Heading>
<Heading order={6}>This is h6 title</Heading>

Text props

Title supports all Text component props.

Editable Example
<Heading order={3} weight='light' align="center">
H3 heading aligned to center with 100 font-weight
<Heading order={4} decoration='underline' color="indigo">
Underlined h4 heading with indigo color
<Heading order={5} color="pink" italic>
Italic pink h5 heading


order1 | 2 | 3 | 4 | 5 | 62Sets the order of the heading, rendering h1-h6 tags.
asReact.ElementType‘div’The HTML element to render.
size‘xs’ | ‘sm’ | ‘md’ | ‘lg’ | ‘xl’ | ‘2xl’ | ‘3xl’ | ‘4xl’ | ‘5xl’ | ‘6xl’ | ‘7xl’ | ‘8xl’ | ‘9xl’‘md’Sets the font size of the text.
weight‘hairline’ | ‘thin’ | ‘light’ | ‘normal’ | ‘medium’ | ‘semibold’ | ‘bold’ | ‘extrabold’ | ‘black’‘normal’Sets the font weight of the text.
colorRecastColors‘main’Sets the text color.
decoration‘none’ | ‘underline’ | ‘line-through’ | ‘overline’‘none’Sets the text decoration.
transform‘none’ | ‘uppercase’ | ‘lowercase’ | ‘capitalize’‘none’Sets the text transform.
align‘left’ | ‘center’ | ‘right’ | ‘justify’‘inherit’Sets the text alignment.
lineClampstring(1 - 10)undefinedSets the maximum number of lines. Uses @tailwindcss/line-clamp plugin.
italicbooleanundefinedWhen set to true, adds font-style: ellipitalicsis to the text.
truncatebooleanundefinedWhen set to true, adds text-overflow: ellipsis to the text.
Dropdown Menu