Installation

Install the component via the CLI in one command.

npx shadcn@latest add @intentui/heading

Anatomy

import { Heading } from "@/components/ui/heading"

<>
 <Heading level={1}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={3}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={4}>The quick brown fox jumps over the lazy dog</Heading>
</>

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm install tailwind-merge

Examples

Heading levels

By default, when a heading is used on a card component, it will default to level 3. Titles range from levels 1 to 4. Each level determines the title type and font size.

Component API

The Heading component renders a styled heading.