Surfaces

Heading

A typographic element that enhances readability and SEO by defining section titles with hierarchical importance.

Description ListSeparator

Basic

This is a standard heading.

The quick brown fox jumps over the lazy dog

Installation

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

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.

Loading...
Unlock the full power of
Design Intent UI
Build modern web apps faster with 450+ blocks and polished templates crafted for you.
Claim 35% Off
Description List
Separator