Heading

Heading is used to render semantic HTML heading elements.

Import

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

Usage

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>
	<Heading order={4} decoration='underline' color="indigo">
		Underlined h4 heading with indigo color
	</Heading>
	<Heading order={5} color="pink" italic>
		Italic pink h5 heading
	</Heading>
</>

Props

Prop	Type	Default	Description
order	1 \| 2 \| 3 \| 4 \| 5 \| 6	2	Sets the order of the heading, rendering h1-h6 tags.
as	React.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.
color	RecastColors	‘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.
lineClamp	string(1 - 10)	undefined	Sets the maximum number of lines. Uses `@tailwindcss/line-clamp` plugin.
italic	boolean	undefined	When set to `true`, adds `font-style: ellipitalicsis` to the text.
truncate	boolean	undefined	When set to `true`, adds `text-overflow: ellipsis` to the text.