Zentauri UI
Typography

Headings for page structure

Use Heading to mirror your outline with semantic tags while tuning visual scale via displayLevel when marketing layouts need different sizing.

Heading level 1

Heading level 2

Heading level 3

Variants showcase

Tone tokens align with dark shells across Zentauri previews—swap surfaces thoughtfully.

Tone: default

Tone: muted

Tone: primary

Tone: secondary

Tone: accent

Tone: destructive

Tone: info

Tone: success

Tone: warning

Tone: error

Tone: gradient-pink-violet

Tone: gradient-cyan-violet

Tone: gradient-cyan-blue

Tone: gradient-cyan-green

Tone: gradient-cyan-orange

Tone: gradient-cyan-red

Tone: gradient-cyan-purple

Tone: gradient-cyan-pink

Formatting showcase

Boolean emphasis props layer Tailwind utilities consistently.

Bold + italic

Underline + strike

Combination examples

Patterns you can paste into marketing pages and dashboards.

Hero-style heading combo

Typography variants examples

Density mirrors other previews: each row pairs live output with the matching import and JSX. Use Show output / Show code on every row; snippets start with Variant naming the token row.

Variant: HEADING · TONE · DEFAULT

Section title

Variant: HEADING · TONE · MUTED

Section title

Variant: HEADING · TONE · PRIMARY

Section title

Variant: HEADING · TONE · SECONDARY

Section title

Variant: HEADING · TONE · ACCENT

Section title

Variant: HEADING · TONE · DESTRUCTIVE

Section title

Variant: HEADING · TONE · INFO

Section title

Variant: HEADING · TONE · SUCCESS

Section title

Variant: HEADING · TONE · WARNING

Section title

Variant: HEADING · TONE · ERROR

Section title

Variant: HEADING · TONE · GRADIENT-PINK-VIOLET

Section title

Variant: HEADING · TONE · GRADIENT-CYAN-VIOLET

Section title

Variant: HEADING · TONE · GRADIENT-CYAN-BLUE

Section title

Variant: HEADING · TONE · GRADIENT-CYAN-GREEN

Section title

Variant: HEADING · TONE · GRADIENT-CYAN-ORANGE

Section title

Variant: HEADING · TONE · GRADIENT-CYAN-RED

Section title

Variant: HEADING · TONE · GRADIENT-CYAN-PURPLE

Section title

Variant: HEADING · TONE · GRADIENT-CYAN-PINK

Section title

Variant: HEADING · LEVEL · 1

Heading level 1

Variant: HEADING · LEVEL · 2

Heading level 2

Variant: HEADING · LEVEL · 3

Heading level 3

Variant: HEADING · LEVEL · 4

Heading level 4

Variant: HEADING · LEVEL · 5

Heading level 5

Variant: HEADING · LEVEL · 6

Heading level 6

Variant: HEADING · EMPHASIS · BOLD + UNDERLINE + PRIMARY

Callout title

What it does

Maps level 1–6 to native heading tags with shared tone and emphasis toggles.

scroll-m-20 aids anchor navigation without extra wrappers.

Composition and API

Combine tone with bold, italic, underline, or strikethrough when specs call for emphasis.

Avoid skipping heading ranks inside the same container.

Common use cases

  • Hero titles and section titles in docs.
  • Admin shells with predictable heading scale.
  • Landing pages that keep one clear h1.
  • Cards where visual size differs from outline rank.

Accessibility

Expose the correct level for screen reader outlines.

Do not style plain divs as headings—use the semantic tag.

Next.js integration notes

Import Heading from `@zentauri-ui/zentauri-components/ui/typography`.

Keep interactive playgrounds in client components only when needed.

FAQ

Can heading level differ from visual size?

Yes. Use displayLevel to adjust Tailwind scale classes while keeping the semantic tag from level.

Do headings include spacing presets?

Spacing is left to layout utilities; primitives stay predictable so page shells control rhythm.

Are tones accessible on dark backgrounds?

Defaults target slate surfaces used across Zentauri previews; verify contrast if you change surfaces.