Typography

Paragraph text for interfaces

Default to paragraph semantics with optional span, div, or label rendering when forms require it.

Large relaxed paragraph for intros.

Muted supporting sentence underneath.

Variants showcase

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

Paragraph tone — default

Paragraph tone — muted

Paragraph tone — primary

Paragraph tone — secondary

Paragraph tone — accent

Paragraph tone — destructive

Paragraph tone — info

Paragraph tone — success

Paragraph tone — warning

Paragraph tone — error

Paragraph tone — gradient-pink-violet

Paragraph tone — gradient-cyan-violet

Paragraph tone — gradient-cyan-blue

Paragraph tone — gradient-cyan-green

Paragraph tone — gradient-cyan-orange

Paragraph tone — gradient-cyan-red

Paragraph tone — gradient-cyan-purple

Paragraph tone — gradient-cyan-pink

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.

Supporting paragraph with muted italic emphasis at larger size.

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

Body copy for dense interfaces.

Variant: TEXT · TONE · MUTED

Body copy for dense interfaces.

Variant: TEXT · TONE · PRIMARY

Body copy for dense interfaces.

Variant: TEXT · TONE · SECONDARY

Body copy for dense interfaces.

Variant: TEXT · TONE · ACCENT

Body copy for dense interfaces.

Variant: TEXT · TONE · DESTRUCTIVE

Body copy for dense interfaces.

Variant: TEXT · TONE · INFO

Body copy for dense interfaces.

Variant: TEXT · TONE · SUCCESS

Body copy for dense interfaces.

Variant: TEXT · TONE · WARNING

Body copy for dense interfaces.

Variant: TEXT · TONE · ERROR

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-PINK-VIOLET

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-VIOLET

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-BLUE

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-GREEN

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-ORANGE

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-RED

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-PURPLE

Body copy for dense interfaces.

Variant: TEXT · TONE · GRADIENT-CYAN-PINK

Body copy for dense interfaces.

Variant: TEXT · SIZE · SM

Sized paragraph text.

Variant: TEXT · SIZE · BASE

Sized paragraph text.

Variant: TEXT · SIZE · LG

Sized paragraph text.

Variant: TEXT · EMPHASIS · ITALIC + HIGHLIGHT + MUTED

Beta feature — subject to change.

Typography API

Generated from the package prop types and variant definitions.

Blockquote

BlockquoteProps

Behavior

Prop	Type	Default
attributionAttribution label shown in a footer (distinct from the HTML `cite` URL attribute).	`string \| 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> & RefObject<HTMLQuoteElement>) \| undefined`	none
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLQuoteElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CodeBlock

CodeBlockProps

Behavior

Prop	Type	Default
languageHint for stacked highlighting stacks / aria-labels.	`string \| 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> & RefObject<HTMLPreElement>) \| undefined`	none
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLPreElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Heading

HeadingProps

Variants

Prop	Type	Default
level*	`123456`	none

Behavior

Prop	Type	Default
bold	`boolean \| undefined`	none
displayLevelVisual scale; defaults to `level`.	`HeadingLevel \| undefined`	none
italic	`boolean \| 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> & RefObject<HTMLHeadingElement>) \| undefined`	none
strikethrough	`boolean \| undefined`	none
tone	`TypographyTone \| 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
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

InlineCode

InlineCodeProps

Behavior

Prop	Type	Default
tone	`TypographyTone \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

List

ListProps

Behavior

Prop	Type	Default
marker	`UnorderedMarker \| undefined`	none
ordered	`boolean \| undefined`	none
tone	`TypographyTone \| 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
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

ListItem

ListItemProps

Behavior

Prop	Type	Default
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> & RefObject<HTMLLIElement>) \| undefined`	none

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLLIElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Text

TextProps

Variants

Prop	Type	Default
size	`baselgsm`	base

Behavior

Prop	Type	Default
as	`TextElement \| undefined`	none
bold	`boolean \| undefined`	none
highlight	`boolean \| undefined`	none
italic	`boolean \| undefined`	none
strikethrough	`boolean \| undefined`	none
tone	`TypographyTone \| 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<HTMLElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

What it does

Provides sized body copy with tone variants and emphasis switches.

Highlight wraps phrases with a subtle background wash.

Composition and API

Use `as` to swap tags without losing typography recipes.

Pair muted tone with secondary layout chrome sparingly.

Common use cases

Long-form docs and marketing blurbs.
Muted helper lines under controls.
Inline labels next to toggles.
Highlighted phrases without leaving the Text primitive.

Accessibility

Prefer paragraphs for blocks of text.

Reserve label rendering for actual label semantics tied to controls.

Next.js integration notes

Server components can render static Text content.

Move interactive demos into client boundaries only when required.

FAQ

How do sizes map?

sm, base, and lg align with Tailwind text-sm through text-lg with relaxed leading.

Can I nest interactive elements?

Children can include links or buttons; keep interactive targets large enough for pointer and keyboard users.

Does highlight use a fixed color?

Highlight applies an amber translucent wash suitable for dark shells; override with className if your theme differs.