Typography

Typography system overview

Browse headings, body copy, lists, quotations, inline emphasis, and code blocks from one hub. Each section demonstrates variants, formatting combinations, and snippets you can paste into App Router pages. Explore scale tokens, presets, semantic inline emphasis and accessible labels.

Browse sections

Pick a topic to view variants, formatting, combinations, and snippets.

Editorial recipes

Open preview

Number formatting

Open preview

Highlighting and relevance

Open preview

Truncation and expansion

Open preview

Prose and rich content

Open preview

Text links

Open preview

Description lists

Open preview

Scale and presets

Open preview

Accessible text

Open preview

Headings

Open preview

Paragraph

Open preview

Lists

Open preview

Blockquote

Open preview

Inline text

Open preview

Code blocks

Open preview

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

CSS variable overrides

Typography CSS variables

Override colors, fonts, scale, leading, tracking, measures and rhythm on :root, a theme selector, or a typography wrapper. Dark metric tokens inherit their light overrides when omitted. An initial font, weight or tracking variable leaves the computed property inherited. Private --_zui-type-* properties are implementation details.

552 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-typography-font-display: initial;
  --zui-typography-display-sm-size: 3rem;
  --zui-typography-display-sm-leading: 1.1;
  --zui-typography-display-md-size: 3.75rem;
  --zui-typography-display-md-leading: 1.1;
  --zui-typography-display-lg-size: 4.5rem;
  --zui-typography-display-lg-leading: 1.1;
  --zui-typography-display-sm-fluid-size: clamp(2.25rem,1.5rem + 3vw,3rem);
  --zui-typography-display-md-fluid-size: clamp(2.75rem,1.75rem + 4vw,3.75rem);
  --zui-typography-display-lg-fluid-size: clamp(3rem,1.5rem + 6vw,4.5rem);
  --zui-typography-heading-1-fluid-size: clamp(2.25rem,1.75rem + 2vw,3rem);
  --zui-typography-heading-1-fluid-leading: 1.2;
  --zui-typography-heading-2-fluid-size: clamp(1.875rem,1.625rem + 1vw,2.25rem);
  --zui-typography-heading-2-fluid-leading: 1.2;
  --zui-typography-heading-3-fluid-size: clamp(1.5rem,1.25rem + 1vw,1.875rem);
  --zui-typography-heading-3-fluid-leading: 1.2;
  --zui-typography-heading-4-fluid-size: clamp(1.25rem,1.125rem + 0.5vw,1.5rem);
  --zui-typography-heading-4-fluid-leading: 1.2;
  --zui-typography-heading-5-fluid-size: clamp(1.125rem,1rem + 0.5vw,1.25rem);
  --zui-typography-heading-5-fluid-leading: 1.2;
  --zui-typography-heading-6-fluid-size: clamp(1rem,0.875rem + 0.5vw,1.125rem);
  --zui-typography-heading-6-fluid-leading: 1.2;
  --zui-typography-heading-1-size: 2.25rem;
  --zui-typography-heading-1-leading: calc(2.5/2.25);
  --zui-typography-heading-1-weight: 700;
  --zui-typography-heading-1-tracking: -0.025em;
  --zui-typography-heading-1-size-md: 3rem;
  --zui-typography-heading-1-leading-md: 1;
  --zui-typography-heading-2-size: 1.875rem;
  --zui-typography-heading-2-leading: calc(2.25/1.875);
  --zui-typography-heading-2-weight: 600;
  --zui-typography-heading-2-tracking: -0.025em;
  --zui-typography-heading-3-size: 1.5rem;
  --zui-typography-heading-3-leading: calc(2/1.5);
  --zui-typography-heading-3-weight: 600;
  --zui-typography-heading-3-tracking: -0.025em;
  --zui-typography-heading-4-size: 1.25rem;
  --zui-typography-heading-4-leading: calc(1.75/1.25);
  --zui-typography-heading-4-weight: 600;
  --zui-typography-heading-4-tracking: -0.025em;
  --zui-typography-heading-5-size: 1.125rem;
  --zui-typography-heading-5-leading: calc(1.75/1.125);
  --zui-typography-heading-5-weight: 500;
  --zui-typography-heading-5-tracking: initial;
  --zui-typography-heading-6-size: 1rem;
  --zui-typography-heading-6-leading: 1.5;
  --zui-typography-heading-6-weight: 500;
  --zui-typography-heading-6-tracking: initial;
  --zui-typography-list-gap: 0.5rem;
  --zui-typography-list-indent: 1.25rem;
  --zui-typography-font-body: initial;
  --zui-typography-text-xs-size: 0.75rem;
  --zui-typography-text-xs-leading: 1.625;
  --zui-typography-text-xs-weight: initial;
  --zui-typography-text-xs-tracking: initial;
  --zui-typography-text-sm-size: 0.875rem;
  --zui-typography-text-sm-leading: 1.625;
  --zui-typography-text-sm-weight: initial;
  --zui-typography-text-sm-tracking: initial;
  --zui-typography-text-base-size: 1rem;
  --zui-typography-text-base-leading: 1.625;
  --zui-typography-text-base-weight: initial;
  --zui-typography-text-base-tracking: initial;
  --zui-typography-text-lg-size: 1.125rem;
  --zui-typography-text-lg-leading: 1.625;
  --zui-typography-text-lg-weight: initial;
  --zui-typography-text-lg-tracking: initial;
  --zui-typography-text-xl-size: 1.25rem;
  --zui-typography-text-xl-leading: 1.625;
  --zui-typography-text-xl-weight: initial;
  --zui-typography-text-xl-tracking: initial;
  --zui-typography-quote-attribution-gap: 0.75rem;
  --zui-typography-quote-attribution-size: 0.875rem;
  --zui-typography-quote-attribution-leading: calc(1.25/0.875);
  --zui-typography-quote-border-width: 4px;
  --zui-typography-quote-padding-y: 0.25rem;
  --zui-typography-quote-padding-start: 1rem;
  --zui-typography-quote-gap: 0.5rem;
  --zui-typography-quote-leading: 1.625;
  --zui-typography-code-padding: 1rem;
  --zui-typography-code-size: 0.875rem;
  --zui-typography-code-leading: 1.625;
  --zui-typography-code-bg: color-mix(in oklab,var(--color-white,#fff) 90%,transparent);
  --zui-typography-code-border: color-mix(in oklab,var(--color-white,#fff) 10%,transparent);
  --zui-typography-code-shadow: oklch(12.9% 0.042 264.695 / 0.4);
  --zui-typography-font-mono: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);
  --zui-typography-code-content-size: 0.95em;
  --zui-typography-description-row-gap: 1rem;
  --zui-typography-description-column-gap: 1rem;
  --zui-typography-description-value-gap: 0.375rem;
  --zui-typography-description-rule-color: #cbd5e1;
  --zui-typography-description-columns: minmax(0,1fr) minmax(0,2fr);
  --zui-typography-description-rule-width: 1px;
  --zui-typography-description-separator-padding: 1rem;
  --zui-typography-description-term-weight: 500;
  --zui-typography-drop-cap-gap: 0.15em;
  --zui-typography-drop-cap-size: 3.5em;
  --zui-typography-drop-cap-leading: 0.9;
  --zui-typography-expandable-gap: 0.5rem;
  --zui-typography-expandable-fg: #0369a1;
  --zui-typography-expandable-focus-width: 2px;
  --zui-typography-expandable-focus-offset: 2px;
  --zui-typography-expandable-focus-color: #0284c7;
  --zui-typography-footnote-scroll-margin: 6rem;
  --zui-typography-footnote-focus-width: 2px;
  --zui-typography-footnote-focus-offset: 2px;
  --zui-typography-footnote-focus-ring: var(--zui-typography-link-focus-ring,#0369a1);
  --zui-typography-link-focus-ring: #0369a1;
  --zui-typography-footnote-reference-gap: 0.125em;
  --zui-typography-footnotes-margin: 1.5rem;
  --zui-typography-footnotes-padding: 1rem;
  --zui-typography-footnotes-indent: 1.5rem;
  --zui-typography-footnotes-gap: 0.75rem;
  --zui-typography-footnotes-border-width: 1px;
  --zui-typography-footnotes-border-color: #cbd5e1;
  --zui-typography-footnotes-size: 0.875rem;
  --zui-typography-footnotes-leading: 1.6;
  --zui-typography-highlight-bg: color-mix(in oklab,var(--color-amber-400,oklch(82.8% 0.189 84.429)) 15%,transparent);
  --zui-typography-inline-code-padding-x: 0.375rem;
  --zui-typography-inline-code-padding-y: 0.125rem;
  --zui-typography-inline-code-size: 0.925em;
  --zui-typography-inline-code-weight: 400;
  --zui-typography-inline-code-bg: color-mix(in oklab,var(--color-white,#fff) 6%,transparent);
  --zui-typography-inline-code-border: color-mix(in oklab,var(--color-white,#fff) 10%,transparent);
  --zui-typography-leading-tight: 1.25;
  --zui-typography-leading-normal: 1.5;
  --zui-typography-leading-relaxed: 1.625;
  --zui-typography-link-underline-offset: 0.2em;
  --zui-typography-link-underline-width: 1px;
  --zui-typography-link-indicator-size: 0.875em;
  --zui-typography-link-indicator-gap: 0.25em;
  --zui-typography-link-default-fg: var(--zui-typography-default-fg,oklch(20.8% 0.042 265.755));
  --zui-typography-default-fg: oklch(20.8% 0.042 265.755);
  --zui-typography-link-default-hover-fg: var(--zui-typography-link-default-fg,var(--zui-typography-default-fg,oklch(20.8% 0.042 265.755)));
  --zui-typography-link-default-visited-fg: var(--zui-typography-link-default-fg,var(--zui-typography-default-fg,oklch(20.8% 0.042 265.755)));
  --zui-typography-link-muted-fg: var(--zui-typography-muted-fg,oklch(55.4% 0.046 257.417));
  --zui-typography-muted-fg: oklch(55.4% 0.046 257.417);
  --zui-typography-link-muted-hover-fg: var(--zui-typography-link-muted-fg,var(--zui-typography-muted-fg,oklch(55.4% 0.046 257.417)));
  --zui-typography-link-muted-visited-fg: var(--zui-typography-link-muted-fg,var(--zui-typography-muted-fg,oklch(55.4% 0.046 257.417)));
  --zui-typography-link-primary-fg: var(--zui-typography-primary-fg,oklch(52% 0.105 223.128));
  --zui-typography-primary-fg: oklch(52% 0.105 223.128);
  --zui-typography-link-primary-hover-fg: var(--zui-typography-link-primary-fg,var(--zui-typography-primary-fg,oklch(52% 0.105 223.128)));
  --zui-typography-link-primary-visited-fg: var(--zui-typography-link-primary-fg,var(--zui-typography-primary-fg,oklch(52% 0.105 223.128)));
  --zui-typography-link-secondary-fg: var(--zui-typography-secondary-fg,oklch(44.6% 0.043 257.281));
  --zui-typography-secondary-fg: oklch(44.6% 0.043 257.281);
  --zui-typography-link-secondary-hover-fg: var(--zui-typography-link-secondary-fg,var(--zui-typography-secondary-fg,oklch(44.6% 0.043 257.281)));
  --zui-typography-link-secondary-visited-fg: var(--zui-typography-link-secondary-fg,var(--zui-typography-secondary-fg,oklch(44.6% 0.043 257.281)));
  --zui-typography-link-accent-fg: var(--zui-typography-accent-fg,oklch(49.1% 0.27 292.581));
  --zui-typography-accent-fg: oklch(49.1% 0.27 292.581);
  --zui-typography-link-accent-hover-fg: var(--zui-typography-link-accent-fg,var(--zui-typography-accent-fg,oklch(49.1% 0.27 292.581)));
  --zui-typography-link-accent-visited-fg: var(--zui-typography-link-accent-fg,var(--zui-typography-accent-fg,oklch(49.1% 0.27 292.581)));
  --zui-typography-link-destructive-fg: var(--zui-typography-destructive-fg,oklch(58.6% 0.253 17.585));
  --zui-typography-destructive-fg: oklch(58.6% 0.253 17.585);
  --zui-typography-link-destructive-hover-fg: var(--zui-typography-link-destructive-fg,var(--zui-typography-destructive-fg,oklch(58.6% 0.253 17.585)));
  --zui-typography-link-destructive-visited-fg: var(--zui-typography-link-destructive-fg,var(--zui-typography-destructive-fg,oklch(58.6% 0.253 17.585)));
  --zui-typography-link-info-fg: var(--zui-typography-info-fg,oklch(50% 0.134 242.749));
  --zui-typography-info-fg: oklch(50% 0.134 242.749);
  --zui-typography-link-info-hover-fg: var(--zui-typography-link-info-fg,var(--zui-typography-info-fg,oklch(50% 0.134 242.749)));
  --zui-typography-link-info-visited-fg: var(--zui-typography-link-info-fg,var(--zui-typography-info-fg,oklch(50% 0.134 242.749)));
  --zui-typography-link-success-fg: var(--zui-typography-success-fg,oklch(50.8% 0.118 165.612));
  --zui-typography-success-fg: oklch(50.8% 0.118 165.612);
  --zui-typography-link-success-hover-fg: var(--zui-typography-link-success-fg,var(--zui-typography-success-fg,oklch(50.8% 0.118 165.612)));
  --zui-typography-link-success-visited-fg: var(--zui-typography-link-success-fg,var(--zui-typography-success-fg,oklch(50.8% 0.118 165.612)));
  --zui-typography-link-warning-fg: var(--zui-typography-warning-fg,oklch(55.5% 0.163 48.998));
  --zui-typography-warning-fg: oklch(55.5% 0.163 48.998);
  --zui-typography-link-warning-hover-fg: var(--zui-typography-link-warning-fg,var(--zui-typography-warning-fg,oklch(55.5% 0.163 48.998)));
  --zui-typography-link-warning-visited-fg: var(--zui-typography-link-warning-fg,var(--zui-typography-warning-fg,oklch(55.5% 0.163 48.998)));
  --zui-typography-link-error-fg: var(--zui-typography-error-fg,oklch(50.5% 0.213 27.518));
  --zui-typography-error-fg: oklch(50.5% 0.213 27.518);
  --zui-typography-link-error-hover-fg: var(--zui-typography-link-error-fg,var(--zui-typography-error-fg,oklch(50.5% 0.213 27.518)));
  --zui-typography-link-error-visited-fg: var(--zui-typography-link-error-fg,var(--zui-typography-error-fg,oklch(50.5% 0.213 27.518)));
  --zui-typography-list-leading: 1.625;
  --zui-typography-mark-bg: #fef08a;
  --zui-typography-mark-fg: #422006;
  --zui-typography-mark-padding-x: 0.125em;
  --zui-typography-mark-radius: 0.125em;
  --zui-typography-measure: 65ch;
  --zui-typography-measure-wide: 80ch;
  --zui-typography-default-border: #00000026;
  --zui-typography-muted-border: #00000026;
  --zui-typography-primary-border: oklch(86.5% 0.127 207.078 / 0.4);
  --zui-typography-secondary-border: #00000026;
  --zui-typography-accent-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-destructive-border: oklch(81% 0.117 11.638 / 0.4);
  --zui-typography-info-border: oklch(82.8% 0.111 230.318 / 0.4);
  --zui-typography-success-border: oklch(84.5% 0.143 164.978 / 0.4);
  --zui-typography-warning-border: oklch(87.9% 0.169 91.605 / 0.4);
  --zui-typography-error-border: oklch(80.8% 0.114 19.571 / 0.4);
  --zui-typography-prose-paragraph-gap: 1.25em;
  --zui-typography-prose-h1-size: 2.25em;
  --zui-typography-prose-heading-weight: 600;
  --zui-typography-prose-heading-leading: 1.25;
  --zui-typography-prose-heading-gap-before: 1.5em;
  --zui-typography-prose-heading-gap-after: 0.5em;
  --zui-typography-prose-h2-size: 1.875em;
  --zui-typography-prose-h3-size: 1.5em;
  --zui-typography-prose-h4-size: 1.25em;
  --zui-typography-prose-h5-size: 1.125em;
  --zui-typography-prose-h6-size: 1em;
  --zui-typography-prose-list-margin: 1.25em;
  --zui-typography-prose-list-indent: 1.5em;
  --zui-typography-prose-list-item-gap: 0.375em;
  --zui-typography-prose-nested-list-margin: 0.5em;
  --zui-typography-prose-quote-border-width: 4px;
  --zui-typography-prose-quote-border: var(--zui-typography-default-border,#00000026);
  --zui-typography-prose-quote-indent: 1em;
  --zui-typography-prose-quote-margin: 1.5em;
  --zui-typography-prose-strong-weight: 700;
  --zui-typography-prose-inline-code-bg: #f1f5f9;
  --zui-typography-prose-inline-code-padding: 0.25em;
  --zui-typography-prose-code-padding: 1em;
  --zui-typography-prose-code-radius: 0.75rem;
  --zui-typography-prose-code-bg: #f1f5f9;
  --zui-typography-prose-code-margin: 1.5em;
  --zui-typography-prose-link-fg: var(--zui-typography-primary-fg,#0e7490);
  --zui-typography-prose-link-hover-fg: #0369a1;
  --zui-typography-prose-link-visited-fg: #6d28d9;
  --zui-typography-prose-rule-margin: 2em;
  --zui-typography-prose-rule-color: #cbd5e1;
  --zui-typography-prose-table-margin: 1.5em;
  --zui-typography-prose-table-cell-padding-x: 0.75em;
  --zui-typography-prose-table-cell-padding-y: 0.5em;
  --zui-typography-prose-table-border-width: 1px;
  --zui-typography-prose-table-border-color: #cbd5e1;
  --zui-typography-prose-image-radius: 0.5rem;
  --zui-typography-prose-figure-margin: 1.5em;
  --zui-typography-prose-caption-size: 0.875em;
  --zui-typography-prose-caption-gap: 0.5em;
  --zui-typography-prose-caption-fg: #64748b;
  --zui-typography-prose-definition-margin: 1.25em;
  --zui-typography-prose-definition-indent: 1.5em;
  --zui-typography-prose-definition-gap: 0.5em;
  --zui-typography-small-size: 0.875em;
  --zui-typography-strong-weight: 700;
  --zui-typography-overline-tracking: 0.1em;
  --zui-typography-overline-leading: 1.5;
  --zui-typography-overline-weight: 500;
  --zui-typography-gradient-pink-violet-from: oklch(59.2% 0.249 0.584);
  --zui-typography-gradient-pink-violet-to: oklch(54.1% 0.281 293.009);
  --zui-typography-gradient-pink-violet-fg: transparent;
  --zui-typography-gradient-pink-violet-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-gradient-cyan-violet-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-violet-to: oklch(54.1% 0.281 293.009);
  --zui-typography-gradient-cyan-violet-fg: transparent;
  --zui-typography-gradient-cyan-violet-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-gradient-cyan-blue-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-blue-to: oklch(54.6% 0.245 262.881);
  --zui-typography-gradient-cyan-blue-fg: transparent;
  --zui-typography-gradient-cyan-blue-border: oklch(80.9% 0.105 251.813 / 0.4);
  --zui-typography-gradient-cyan-green-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-green-to: oklch(62.7% 0.194 149.214);
  --zui-typography-gradient-cyan-green-fg: transparent;
  --zui-typography-gradient-cyan-green-border: oklch(87.1% 0.15 154.449 / 0.4);
  --zui-typography-gradient-cyan-orange-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-orange-to: oklch(64.6% 0.222 41.116);
  --zui-typography-gradient-cyan-orange-fg: transparent;
  --zui-typography-gradient-cyan-orange-border: oklch(83.7% 0.128 66.29 / 0.4);
  --zui-typography-gradient-cyan-red-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-red-to: oklch(57.7% 0.245 27.325);
  --zui-typography-gradient-cyan-red-fg: transparent;
  --zui-typography-gradient-cyan-red-border: oklch(80.8% 0.114 19.571 / 0.4);
  --zui-typography-gradient-cyan-purple-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-purple-to: oklch(55.8% 0.288 302.321);
  --zui-typography-gradient-cyan-purple-fg: transparent;
  --zui-typography-gradient-cyan-purple-border: oklch(82.7% 0.119 306.383 / 0.4);
  --zui-typography-gradient-cyan-pink-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-pink-to: oklch(59.2% 0.249 0.584);
  --zui-typography-gradient-cyan-pink-fg: transparent;
  --zui-typography-gradient-cyan-pink-border: oklch(82.3% 0.12 346.018 / 0.4);
  --zui-typography-tracking-tight: -0.025em;
  --zui-typography-tracking-normal: 0em;
  --zui-typography-tracking-wide: 0.025em;
  --zui-typography-weight-normal: 400;
  --zui-typography-weight-medium: 500;
  --zui-typography-weight-semibold: 600;
  --zui-typography-weight-bold: 700;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-typography-font-display-dark: var(--zui-typography-font-display,initial);
  --zui-typography-display-sm-size-dark: var(--zui-typography-display-sm-size,3rem);
  /* ...same variables with -dark at the end */
}

What it does

Provides Heading, Text, List, Blockquote, InlineCode, CodeBlock, Strong, Emphasis, Small and VisuallyHidden. Fonts, type scale, leading and tracking use paired CSS variable tokens.

Sections

Marketing pages with consistent heading scale.
Documentation sites with lists and block quotes.
Dashboard copy with muted secondary lines.
Inline code and fenced samples without bespoke CSS.

Composition and API

Prefer small primitives over prop-heavy wrappers.

Compose bold, italic, underline, and strikethrough via booleans on Heading and Text.

Accessibility

Reserve headings for titles and sections.

Keep contrast sufficient for muted tones against your background; validate blockquotes with readable citations.

Next.js integration notes

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

Set NEXT_PUBLIC_SITE_URL so canonical metadata resolves on deploy.

FAQ

Does Typography work with Next.js App Router?

Yes. Primitives are plain React components; use them in server components unless you wrap interactive playgrounds that rely on client hooks.

Can I override styles with Tailwind?

Pass className to merge utilities; tones map to semantic Tailwind text colors aligned with the rest of Zentauri UI.

How do I choose heading levels for accessibility?

Match Heading level to document outline: one h1 per page where appropriate, then descend without skipping ranks inside each region.