Heading Variant

This is demo and docs for heading variant

H1 Heading Variants

Heading 1 heading variants

H1 Variants · xl · bold

h1 · 3xl · bold · primary

h1 · 2xl · semi-bold · secondary

h1 · xl · medium · tertiary

h1 · default · normal · primary

h1 · sm · muted

H2 Heading Variants

H2 heading variants

H2 Variants

h2 · 3xl · bold

h2 · xl · semi-bold

h2 · base · medium

h2 · default

h2 · sm · muted

H3 Heading Variants

H3 heading variants

H3 Variants

h3 · 3xl

h3 · xl · semi-bold

h3 · base · medium

h3 · default

h3 · sm · muted

H4 Heading Variants

H4 heading variants

H4 Variants

h4 · xl

h4 · default · medium

h4 · base

h4 · sm · muted

Heading Component Documentation

The Heading component is a flexible and semantic typography component built with React, TailwindCSS, and Class Variance Authority (CVA).
It supports multiple heading levels, sizes, colors, font weights, fonts, and text styles, while keeping consistent typography across the application.

Basic Usage

<Heading>Default Heading</Heading>

<Heading as="h2" size="xl">
  Section Title
</Heading>

<Heading as="h3" weight="bold">
  Bold Heading
</Heading>

Props

The Heading component accepts all native <h1> – <h6> props and the following variants:

Prop	Type	Default	Description
as	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"	"h1"	Semantic HTML heading element to render.
size	string	default	Controls font size. Options: 3xl, 2xl, xl, lg, default, base, sm.
color	string	default	Text color variant. Options: default, primary, secondary, tertiary, muted.
weight	string	default	Font weight. Options: default, medium, semi-bold, bold.
font	string	default	Font family. Options: default, secondary, tertiary.
textStyle	"normal" \| "italic"	normal	Controls italic or normal text style.
decoration	"none" \| "underline"	none	Text decoration style.

Heading Levels

<Heading as="h1">Heading 1</Heading>
<Heading as="h2">Heading 2</Heading>
<Heading as="h3">Heading 3</Heading>
<Heading as="h4">Heading 4</Heading>
<Heading as="h5">Heading 5</Heading>
<Heading as="h6">Heading 6</Heading>

Sizes

<Heading size="3xl">3XL Heading</Heading>
<Heading size="2xl">2XL Heading</Heading>
<Heading size="xl">XL Heading</Heading>
<Heading size="lg">Large Heading</Heading>
<Heading size="default">Default Heading</Heading>
<Heading size="base">Base Heading</Heading>
<Heading size="sm">Small Heading</Heading>

Colors

<Heading color="default">Default Color</Heading>
<Heading color="primary">Primary Color</Heading>
<Heading color="secondary">Secondary Color</Heading>
<Heading color="tertiary">Tertiary Color</Heading>
<Heading color="muted">Muted Color</Heading>

Font Weight

<Heading weight="default">Normal Weight</Heading>
<Heading weight="medium">Medium Weight</Heading>
<Heading weight="semi-bold">Semi Bold</Heading>
<Heading weight="bold">Bold Heading</Heading>

Font Family

<Heading font="default">Primary Font</Heading>
<Heading font="secondary">Secondary Font</Heading>
<Heading font="tertiary">Tertiary Font</Heading>

Text Style & Decoration

<Heading textStyle="italic">Italic Heading</Heading>

<Heading decoration="underline">
  Underlined Heading
</Heading>

Example with Multiple Variants

<Heading
  as="h2"
  size="2xl"
  color="primary"
  weight="bold"
  font="secondary"
  decoration="underline"
>
  Section Heading
</Heading>

Notes

Uses CVA for scalable and consistent typography variants.
Supports semantic HTML headings via the as prop.
Fully compatible with Tailwind utility overrides via className.
Prefer semantic heading levels for accessibility and SEO.