Heading

Heading renders semantic heading elements (h1–h6) with a consistent visual scale. The visual size can be overridden independently from the semantic level.

ExamplesCodeUsageChangelog

All levels

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Tailwind v4

<Heading :level="1">Heading level 1</Heading>
<Heading :level="2">Heading level 2</Heading>
<Heading :level="3">Heading level 3</Heading>
<Heading :level="4">Heading level 4</Heading>
<Heading :level="5">Heading level 5</Heading>
<Heading :level="6">Heading level 6</Heading>

Size override

Use size to decouple visual scale from semantic level — e.g. an h2 that looks like the largest heading.

h2 at xxl size

h3 at sm size

h1 at xs size

Tailwind v4

<Heading :level="2" size="xxl">h2 at xxl size</Heading>
<Heading :level="3" size="sm">h3 at sm size</Heading>
<Heading :level="1" size="xs">h1 at xs size</Heading>

Color variants

Default color

Subtle color

Inverse color

Tailwind v4

<Heading :level="3" color="default">Default color</Heading>
<Heading :level="3" color="subtle">Subtle color</Heading>
<Heading :level="3" color="inverse">Inverse color</Heading>

Default size scale

Level	Default size	Font size	Weight
h1	xxl	36px	800
h2	xl	30px	700
h3	lg	24px	700
h4	md	20px	600
h5	sm	16px	600
h6	xs	14px	600

Props

Prop	Type	Default	Description
level	1 | 2 | 3 | 4 | 5 | 6	2	Semantic HTML heading level
size	'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'	—	Visual size override (defaults to level mapping)
color	'default' | 'subtle' | 'inverse'	'default'	Text color