Typography

Typography system overview

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

Browse sections

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

Headings

Open preview

Paragraph

Open preview

Lists

Open preview

Blockquote

Open preview

Inline text

Open preview

Code blocks

Open preview

Typography API

Generated from the package prop types and variant definitions.

Blockquote

BlockquoteProps

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

CSS variable overrides

Typography CSS variables

Override these typography variables on :root, a theme selector, or a component wrapper.

104 variables

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

:root {
  --zui-typography-default-fg: oklch(20.8% 0.042 265.755);
  --zui-typography-default-border: #00000026;
  --zui-typography-muted-fg: oklch(55.4% 0.046 257.417);
  --zui-typography-muted-border: #00000026;
  --zui-typography-primary-fg: oklch(52% 0.105 223.128);
  --zui-typography-primary-border: oklch(86.5% 0.127 207.078 / 0.4);
  --zui-typography-secondary-fg: oklch(44.6% 0.043 257.281);
  --zui-typography-secondary-border: #00000026;
  --zui-typography-accent-fg: oklch(49.1% 0.27 292.581);
  --zui-typography-accent-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-destructive-fg: oklch(58.6% 0.253 17.585);
  --zui-typography-destructive-border: oklch(81% 0.117 11.638 / 0.4);
  --zui-typography-info-fg: oklch(50% 0.134 242.749);
  --zui-typography-info-border: oklch(82.8% 0.111 230.318 / 0.4);
  --zui-typography-success-fg: oklch(50.8% 0.118 165.612);
  --zui-typography-success-border: oklch(84.5% 0.143 164.978 / 0.4);
  --zui-typography-warning-fg: oklch(55.5% 0.163 48.998);
  --zui-typography-warning-border: oklch(87.9% 0.169 91.605 / 0.4);
  --zui-typography-error-fg: oklch(50.5% 0.213 27.518);
  --zui-typography-error-border: oklch(80.8% 0.114 19.571 / 0.4);
  --zui-typography-gradient-pink-violet-from: oklch(59.2% 0.249 0.584);
  --zui-typography-gradient-pink-violet-to: oklch(54.1% 0.281 293.009);
  --zui-typography-gradient-pink-violet-fg: transparent;
  --zui-typography-gradient-pink-violet-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-gradient-cyan-violet-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-violet-to: oklch(54.1% 0.281 293.009);
  --zui-typography-gradient-cyan-violet-fg: transparent;
  --zui-typography-gradient-cyan-violet-border: oklch(81.1% 0.111 293.571 / 0.4);
  --zui-typography-gradient-cyan-blue-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-blue-to: oklch(54.6% 0.245 262.881);
  --zui-typography-gradient-cyan-blue-fg: transparent;
  --zui-typography-gradient-cyan-blue-border: oklch(80.9% 0.105 251.813 / 0.4);
  --zui-typography-gradient-cyan-green-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-green-to: oklch(62.7% 0.194 149.214);
  --zui-typography-gradient-cyan-green-fg: transparent;
  --zui-typography-gradient-cyan-green-border: oklch(87.1% 0.15 154.449 / 0.4);
  --zui-typography-gradient-cyan-orange-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-orange-to: oklch(64.6% 0.222 41.116);
  --zui-typography-gradient-cyan-orange-fg: transparent;
  --zui-typography-gradient-cyan-orange-border: oklch(83.7% 0.128 66.29 / 0.4);
  --zui-typography-gradient-cyan-red-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-red-to: oklch(57.7% 0.245 27.325);
  --zui-typography-gradient-cyan-red-fg: transparent;
  --zui-typography-gradient-cyan-red-border: oklch(80.8% 0.114 19.571 / 0.4);
  --zui-typography-gradient-cyan-purple-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-purple-to: oklch(55.8% 0.288 302.321);
  --zui-typography-gradient-cyan-purple-fg: transparent;
  --zui-typography-gradient-cyan-purple-border: oklch(82.7% 0.119 306.383 / 0.4);
  --zui-typography-gradient-cyan-pink-from: oklch(60.9% 0.126 221.723);
  --zui-typography-gradient-cyan-pink-to: oklch(59.2% 0.249 0.584);
  --zui-typography-gradient-cyan-pink-fg: transparent;
  --zui-typography-gradient-cyan-pink-border: oklch(82.3% 0.12 346.018 / 0.4);
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-typography-default-fg-dark: oklch(98.4% 0.003 247.858);
  --zui-typography-default-border-dark: #ffffff26;
}

What it does

Provides Heading, Text, List, Blockquote, InlineCode, and CodeBlock with shared tone and emphasis props.

Use semantic HTML by default and tune visuals with display overrides only when necessary.

Sections

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

Composition and API

Prefer small primitives over prop-heavy wrappers.

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

Accessibility

Reserve headings for titles and sections.

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

Next.js integration notes

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

Set NEXT_PUBLIC_SITE_URL so canonical metadata resolves on deploy.

FAQ

Does Typography work with Next.js App Router?

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

Can I override styles with Tailwind?

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

How do I choose heading levels for accessibility?

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