Typography

Prose for articles and rendered MDX

Give rendered content a consistent rhythm while allowing embedded components to keep their own styles. Prose styles markup; it does not parse Markdown or inject HTML.

Content with a consistent rhythm

Native paragraphs, lists and links share a readable style.

Semantic markup
Scoped theme tokens

Content composition

Prose styles already-rendered markup. Embedded component slots and data-prose="ignore" subtrees skip descendant styles. Put wide tables in a scrolling wrapper; use the existing CodeBlock and Kbd entries for richer content.

Rendered article and embedded components

A simpler publishing workflow

Style rendered content with a consistent type scale, links, lists and quotations. Adjust the typography tokens to match your brand.

Keep semantic headings.
- Use a separate visual scale when necessary.
Compose your existing components.

Good defaults should leave room for useful overrides.

Install the family with zentauri-ui add typography.

const article = { title: "Release notes", published: true };

Publishing checklist
Step	Owner
Review copy	Editor
Publish article	Author

A short workflow with clear ownership.

Format: Rendered HTML or MDX

Embedded components keep their styles

A Zentauri quotation keeps its own spacing and tones.
Editorial team

Use ⌘K to open search.

1export const published = true;

An embedded panel controls its own text styles.

Explore the richer code viewer

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

Content composition

Articles, documentation and rendered MDX with embedded UI.

Composition and API

Selectors have zero specificity so utility classes can override them. data-prose="ignore" opts out of descendant styling; inherited container fonts/colors still apply. Wrap wide tables in an overflow-x-auto container.

Accessibility

Preserve native HTML semantics and meaningful link names. Keep headings aligned with the document outline, and provide alternate text for images.

FAQ

Does this require another package?

No parser is required. Prose styles already-rendered markup through scoped selectors and typography tokens; supply React or MDX children.