Typography

Multi-line code samples

Use CodeBlock for copy-ready snippets with horizontal scrolling on narrow viewports and aria-labels describing language hints.

pnpm add @zentauri-ui/zentauri-components

Variants showcase

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

default

export const tone = "default";

muted

export const tone = "muted";

primary

export const tone = "primary";

secondary

export const tone = "secondary";

accent

export const tone = "accent";

destructive

export const tone = "destructive";

info

export const tone = "info";

success

export const tone = "success";

warning

export const tone = "warning";

error

export const tone = "error";

gradient-pink-violet

export const tone = "gradient-pink-violet";

gradient-cyan-violet

export const tone = "gradient-cyan-violet";

gradient-cyan-blue

export const tone = "gradient-cyan-blue";

gradient-cyan-green

export const tone = "gradient-cyan-green";

gradient-cyan-orange

export const tone = "gradient-cyan-orange";

gradient-cyan-red

export const tone = "gradient-cyan-red";

gradient-cyan-purple

export const tone = "gradient-cyan-purple";

gradient-cyan-pink

export const tone = "gradient-cyan-pink";

Formatting showcase

Boolean emphasis props layer Tailwind utilities consistently.

{
  "name": "zentauri-ui",
  "private": true
}

Combination examples

Patterns you can paste into marketing pages and dashboards.

import { Text } from "@zentauri-ui/zentauri-components/ui/typography";

export function Demo() {
  return <Text tone="muted">Preview-ready body copy.</Text>;
}

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

export const tone = "default";

Variant: CODE-BLOCK · TONE · MUTED

export const tone = "muted";

Variant: CODE-BLOCK · TONE · PRIMARY

export const tone = "primary";

Variant: CODE-BLOCK · TONE · SECONDARY

export const tone = "secondary";

Variant: CODE-BLOCK · TONE · ACCENT

export const tone = "accent";

Variant: CODE-BLOCK · TONE · DESTRUCTIVE

export const tone = "destructive";

Variant: CODE-BLOCK · TONE · INFO

export const tone = "info";

Variant: CODE-BLOCK · TONE · SUCCESS

export const tone = "success";

Variant: CODE-BLOCK · TONE · WARNING

export const tone = "warning";

Variant: CODE-BLOCK · TONE · ERROR

export const tone = "error";

Variant: CODE-BLOCK · TONE · GRADIENT-PINK-VIOLET

export const tone = "gradient-pink-violet";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-VIOLET

export const tone = "gradient-cyan-violet";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-BLUE

export const tone = "gradient-cyan-blue";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-GREEN

export const tone = "gradient-cyan-green";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-ORANGE

export const tone = "gradient-cyan-orange";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-RED

export const tone = "gradient-cyan-red";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-PURPLE

export const tone = "gradient-cyan-purple";

Variant: CODE-BLOCK · TONE · GRADIENT-CYAN-PINK

export const tone = "gradient-cyan-pink";

Variant: CODE-BLOCK · LANGUAGE · BASH

pnpm add @zentauri-ui/zentauri-components

Variant: CODE-BLOCK · LANGUAGE · TSX

import { Text } from "@zentauri-ui/zentauri-components/ui/typography";

export function Demo() {
  return <Text tone="muted">Ready.</Text>;
}

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

Wraps children in pre/code with padded, bordered surfaces.

Overflow-x keeps wide snippets usable on mobile.

Composition and API

Tone adjusts text color consistently with other typography primitives.

Extend via className when embedding inside cards.

Common use cases

Installation commands.
JSON payloads in docs.
Diff excerpts for reviews.
Sample env blocks with warnings.

Accessibility

Labels describe the snippet purpose.

Ensure focus order still reaches surrounding explanatory text.

Next.js integration notes

Avoid importing massive highlighters into server layouts unnecessarily.

Lazy-load heavy highlighting clientside when needed.

FAQ

Does CodeBlock highlight syntax?

Not by default—pipe highlighted nodes as children or integrate a highlighter in your app shell.

How does language prop help?

It shapes aria-label text for assistive technologies and future highlighting integrations.

Can children include JSX?

Pass plain text children for simplest cases; advanced highlighting may inject spans inside code.