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

Typography foundations

Explicit size, weight, leading and tracking override preset styling. Explicit weight also overrides the legacy bold prop. Existing defaults remain unchanged; fluid sizing is opt-in.

Fluid heading and text presets

A readable scale for every screen

Product update

Lead copy introduces a section with a relaxed, readable rhythm.

Caption copy supports the main content.

12,345.67

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

Typography API

Generated from the package prop types and variant definitions.

Blockquote

BlockquoteProps

Variants

Prop	Type	Default
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Behavior

Prop	Type	Default
attributionAttribution label; distinct from the native cite URL attribute.	`string \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLQuoteElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLQuoteElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CodeBlock

CodeBlockProps

Variants

Prop	Type	Default
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Behavior

Prop	Type	Default
language	`string \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLPreElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLPreElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

DescriptionList

DescriptionListProps

Variants

Prop	Type	Default
layout	`inlineresponsivestacked`	responsive
separators	`falsetrue`	false
size	`baselgsm`	base
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDListElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLDListElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

DescriptionListDetails

DescriptionListDetailsProps

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

DescriptionListItem

DescriptionListItemProps

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLDivElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

DescriptionListTerm

DescriptionListTermProps

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Emphasis

EmphasisProps

Variants

Prop	Type	Default
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

ExpandableText

ExpandableTextProps

Behavior

Prop	Type	Default
buttonClassName	`string \| undefined`	none
contentClassName	`string \| undefined`	none
contentId	`string \| undefined`	none
defaultExpanded	`boolean \| undefined`	none
expanded	`boolean \| undefined`	none
lessLabel	`string \| undefined`	none
lines	`number \| undefined`	none
moreLabel	`string \| undefined`	none
onExpandedChange	`((expanded: boolean) => void) \| undefined`	none
showToggleAlways exposes the control when layout measurement is unavailable.	`'overflow' \| 'always' \| undefined`	none
text*	`string`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLDivElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

FootnoteBacklink

FootnoteBacklinkProps

Behavior

Prop	Type	Default
label*	`string`	none
noteId*	`string`	none
referenceId*	`string`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
download	`any`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLAnchorElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLAnchorElement> \| undefined`	none
referrerPolicy	`HTMLAttributeReferrerPolicy \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
target	`HTMLAttributeAnchorTarget \| undefined`	none
title	`string \| undefined`	none

FootnoteItem

FootnoteItemProps

Behavior

Prop	Type	Default
noteId*	`string`	none
number*	`number`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLLIElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLLIElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

FootnoteReference

FootnoteReferenceProps

Behavior

Prop	Type	Default
noteId*	`string`	none
number*	`number`	none
referenceId*	`string`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
download	`any`	none
onClick	`MouseEventHandler<HTMLAnchorElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLAnchorElement> \| undefined`	none
referrerPolicy	`HTMLAttributeReferrerPolicy \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
target	`HTMLAttributeAnchorTarget \| undefined`	none
title	`string \| undefined`	none

Footnotes

FootnotesProps

Behavior

Prop	Type	Default
scopeId	`string \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLDivElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

FootnotesList

FootnotesListProps

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLOListElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLOListElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Heading

HeadingProps

Variants

Prop	Type	Default
align	`centerendjustifystart`	none
leading	`normalrelaxedtight`	none
level*	`123456`	none
measure	`nonereadablewide`	none
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default
tracking	`normaltightwide`	none
weight	`boldmediumnormalsemibold`	none
wrap	`balancenormalnowrappretty`	none

Behavior

Prop	Type	Default
boldExplicit weight takes precedence over bold.	`boolean \| undefined`	none
displayLevelVisual scale; defaults to level. Does not change the semantic heading tag.	`HeadingLevel \| undefined`	none
displaySizeMarketing display size. Takes precedence over displayLevel.	`NonNullable<'md' \| 'sm' \| 'lg' \| null \| undefined> \| undefined`	none
italic	`boolean \| undefined`	none
scaleFluid sizing is opt-in; default retains the existing responsive scale.	`'default' \| 'fluid' \| undefined`	none
strikethrough	`boolean \| undefined`	none
underline	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLHeadingElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLHeadingElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

HighlightText

HighlightTextProps

Behavior

Prop	Type	Default
caseSensitiveUnicode simple case folding, without locale or accent normalization.	`boolean \| undefined`	none
markClassName	`string \| undefined`	none
query*	`string \| readonly string[]`	none
text*	`string`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLSpanElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLSpanElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

InlineCode

InlineCodeProps

Variants

Prop	Type	Default
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

List

ListProps

Variants

Prop	Type	Default
marker	`circlediscnone`	disc
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Behavior

Prop	Type	Default
ordered	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLOListElement> \| MouseEventHandler<HTMLUListElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`((instance: HTMLUListElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLUListElement \| null> \| ((instance: HTMLOListElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLOListElement \| null> \| null \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

ListItem

ListItemProps

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLLIElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLLIElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Mark

MarkProps

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

NumberText

NumberTextProps

Variants

Prop	Type	Default
align	`centerendjustifystart`	none
font	`bodymono`	none
leading	`normalrelaxedtight`	none
measure	`nonereadablewide`	none
numeric	`normaltabular`	tabular
size	`baselgsmxlxs`	base
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default
tracking	`normaltightwide`	none
weight	`boldmediumnormalsemibold`	none
wrap	`balancenormalnowrappretty`	none

State

Prop	Type	Default
value*	`number \| bigint`	none

Behavior

Prop	Type	Default
as	`'div' \| 'p' \| 'span' \| undefined`	none
formatOptionsIntl's style is separate from the native React CSS style prop.	`Intl.NumberFormatOptions \| undefined`	none
locale	`string \| string[] \| undefined`	none
partClassNamesStyles native parts without replacing their text or order.	`Partial<Record<keyof Intl.NumberFormatPartTypeRegistry, string>> \| undefined`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| MouseEventHandler<HTMLSpanElement> \| MouseEventHandler<HTMLParagraphElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLDivElement \| null> \| ((instance: HTMLSpanElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLSpanElement \| null> \| ((instance: HTMLParagraphElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLParagraphElement \| null> \| null \| undefined	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Prose

ProseProps

Variants

Prop	Type	Default
measure	`nonereadablewide`	readable
size	`baselgsm`	base
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Behavior

Prop	Type	Default
as	`'div' \| 'article' \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| MouseEventHandler<HTMLElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLDivElement \| null> \| ((instance: HTMLElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLElement \| null> \| null \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Small

SmallProps

Variants

Prop	Type	Default
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Strong

StrongProps

Variants

Prop	Type	Default
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLElement> \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Text

TextProps

Variants

Prop	Type	Default
align	`centerendjustifystart`	none
font	`bodymono`	none
leading	`normalrelaxedtight`	none
measure	`nonereadablewide`	none
numeric	`normaltabular`	none
preset	`bodycaptionleadoverline`	body
size	`baselgsmxlxs`	base
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default
tracking	`normaltightwide`	none
underline	`alwayshovernone`	always
weight	`boldmediumnormalsemibold`	none
wrap	`balancenormalnowrappretty`	none

Behavior

Prop	Type	Default
as	`'div' \| 'label' \| 'p' \| 'span' \| undefined`	none
boldExplicit weight, then a preset's weight, take precedence over bold.	`boolean \| undefined`	none
highlightVisual highlighting only; use semantic emphasis for importance.	`boolean \| undefined`	none
italic	`boolean \| undefined`	none
strikethrough	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| MouseEventHandler<HTMLSpanElement> \| MouseEventHandler<HTMLParagraphElement> \| MouseEventHandler<HTMLLabelElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLDivElement \| null> \| ((instance: HTMLSpanElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLSpanElement \| null> \| ((instance: HTMLParagraphElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLParagraphElement \| null> \| ((instance: HTMLLabelElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLLabelElement \| null> \| null \| undefined	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

TextLink

TextLinkProps

Variants

Prop	Type	Default
align	`centerendjustifystart`	none
leading	`normalrelaxedtight`	none
measure	`nonereadablewide`	none
size	`baselgsmxlxs`	base
tone	`accentdefaultdestructiveerrorgradient-cyan-bluegradient-cyan-greengradient-cyan-orangegradient-cyan-pinkgradient-cyan-purplegradient-cyan-redgradient-cyan-violetgradient-pink-violet`+6	default
tracking	`normaltightwide`	none
underline	`alwayshovernone`	always
weight	`boldmediumnormalsemibold`	none
wrap	`balancenormalnowrappretty`	none

Behavior

Prop	Type	Default
externalIndicatorDecorative external-link marker; does not change target or accessible name.	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
download	`any`	none
href	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLAnchorElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`Ref<HTMLAnchorElement> \| undefined`	none
referrerPolicy	`HTMLAttributeReferrerPolicy \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
target	`HTMLAttributeAnchorTarget \| undefined`	none
title	`string \| undefined`	none

TruncateText

TruncateTextProps

Behavior

Prop	Type	Default
as	`'div' \| 'p' \| 'span' \| undefined`	none
lines	`number \| undefined`	none

Content

Prop	Type	Default
children*	`string`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| MouseEventHandler<HTMLSpanElement> \| MouseEventHandler<HTMLParagraphElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLDivElement \| null> \| ((instance: HTMLSpanElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLSpanElement \| null> \| ((instance: HTMLParagraphElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLParagraphElement \| null> \| null \| undefined	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

VisuallyHidden

VisuallyHiddenProps

Behavior

Prop	Type	Default
as	`'div' \| 'span' \| undefined`	none
focusableReveal on focus-within, for example when containing a skip-link anchor.	`boolean \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| MouseEventHandler<HTMLSpanElement> \| undefined`	none
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).	`((instance: HTMLDivElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLDivElement \| null> \| ((instance: HTMLSpanElement \| null) => void \| (() => VoidOrUndefinedOnly) \| DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) \| RefObject<HTMLSpanElement \| null> \| null \| undefined`	none
rel	`string \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

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.