Typography

Inline emphasis and tokens

Compose InlineCode for monospace tokens and Text toggles for semantic emphasis patterns inside paragraphs.

Run pnpm install then ship.

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.

Semantic inline emphasis

Use importance, stress, and fine print without losing the surrounding text tone.

Variants showcase

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

Tone default with token

Tone muted with token

Tone primary with token

Tone secondary with token

Tone accent with token

Tone destructive with token

Tone info with token

Tone success with token

Tone warning with token

Tone error with token

Tone gradient-pink-violet with token

Tone gradient-cyan-violet with token

Tone gradient-cyan-blue with token

Tone gradient-cyan-green with token

Tone gradient-cyan-orange with token

Tone gradient-cyan-red with token

Tone gradient-cyan-purple with token

Tone gradient-cyan-pink with token

Formatting showcase

Boolean emphasis props layer Tailwind utilities consistently.

Bold + italic + underline

Highlight + muted + strike

Combination examples

Patterns you can paste into marketing pages and dashboards.

Deploy via npx zentauri-ui add typography then verify destructive warnings when deleting routes.

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: INLINE · TONE · DEFAULT

Run pnpm lint before merge.

Variant: INLINE · TONE · MUTED

Run pnpm lint before merge.

Variant: INLINE · TONE · PRIMARY

Run pnpm lint before merge.

Variant: INLINE · TONE · SECONDARY

Run pnpm lint before merge.

Variant: INLINE · TONE · ACCENT

Run pnpm lint before merge.

Variant: INLINE · TONE · DESTRUCTIVE

Run pnpm lint before merge.

Variant: INLINE · TONE · INFO

Run pnpm lint before merge.

Variant: INLINE · TONE · SUCCESS

Run pnpm lint before merge.

Variant: INLINE · TONE · WARNING

Run pnpm lint before merge.

Variant: INLINE · TONE · ERROR

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-PINK-VIOLET

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-VIOLET

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-BLUE

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-GREEN

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-ORANGE

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-RED

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-PURPLE

Run pnpm lint before merge.

Variant: INLINE · TONE · GRADIENT-CYAN-PINK

Run pnpm lint before merge.

Variant: INLINE · NESTED EMPHASIS · BOLD SPAN

Deploy via npx zentauri-ui add typography then verify destructive warnings

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

Demonstrates emphasis combinations on Text and monospace InlineCode surfaces.

Tones align with the broader typography palette.

Composition and API

Nest InlineCode inside Text or headings sparingly.

Avoid deeply nested emphasis toggles.

Common use cases

CLI snippets beside sentences.
API parameter names in prose.
Warnings with destructive tone.
Highlighted beta labels.

Accessibility

Underline complements links elsewhere—avoid conflicting patterns.

Highlight should not be the only cue.

Next.js integration notes

Static docs can ship Inline-heavy paragraphs from MDX.

Ensure code tokens escape user-provided strings.

FAQ

Should InlineCode wrap keyboard keys?

Yes for monospace clarity; pair with Text emphasis when describing shortcuts.

Can InlineCode sit inside buttons?

Technically yes, but prefer plain spans inside buttons unless monospace is required.

Does destructive tone imply errors?

It applies rose text styling—reserve for risky actions or validation messaging.