Typography

The @zendeskgarden/react-typography package provides a complete set of typography components: a six-step typescale, inline and block formatting helpers, list components, and a syntax-highlighted code block.

Installation

npm install @zendeskgarden/react-typography

# Peer dependencies
npm install react react-dom styled-components @zendeskgarden/react-theming

Typescale components

Garden’s typescale maps to six size steps. All typescale components accept a tag prop to change the rendered HTML element and an isBold prop for bold weight. SM, MD, and LG also accept isMonospace.

Component	Rendered size	Default tag
`XXXL`	3× extra-large	`div`
`XXL`	2× extra-large	`div`
`XL`	Extra-large	`div`
`LG`	Large	`div`
`MD`	Medium (body)	`div`
`SM`	Small	`div`

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { XXXL, XXL, XL, LG, MD, SM } from '@zendeskgarden/react-typography';

const App = () => (
  <ThemeProvider>
    <XXXL tag="h1">Page title</XXXL>
    <XXL tag="h2">Section heading</XXL>
    <XL tag="h3">Subsection heading</XL>
    <LG>Lead paragraph text</LG>
    <MD>Standard body text</MD>
    <SM>Small print or helper text</SM>
  </ThemeProvider>
);

Bold weight

<XXXL isBold>Bold display heading</XXXL>
<MD isBold>Bold body text</MD>
<SM isBold>Bold small text</SM>

Monospace

SM, MD, and LG support the isMonospace prop for rendering code-like content inline.

<MD isMonospace>const value = 42;</MD>
<SM isMonospace>npm install @zendeskgarden/react-typography</SM>

Typescale props

tag

any

default:"'div'"

Updates the rendered HTML element (e.g. 'h1', 'h2', 'p', 'span').

isBold

boolean

Applies bold font weight.

isMonospace

boolean

Renders text in a monospace font. Available on SM, MD, and LG only.

Blockquote

Blockquote renders a styled <blockquote> element. The size prop controls the vertical spacing between sibling blockquotes and paragraphs.

import { Blockquote, MD } from '@zendeskgarden/react-typography';

<Blockquote>
  <MD>
    The best way to predict the future is to invent it.
  </MD>
</Blockquote>

Props

size

'small' | 'medium' | 'large'

default:"'medium'"

Controls spacing between sibling blockquotes and paragraphs.

Code

Code renders an inline <code> element with background and text color styling. Use it for inline code references within prose.

import { MD, Code } from '@zendeskgarden/react-typography';

<MD>
  Call <Code>ThemeProvider</Code> at the root of your application.
</MD>

Hue

Use the hue prop to apply a semantic color to inline code.

<Code hue="grey">default</Code>
<Code hue="red">error</Code>
<Code hue="green">success</Code>
<Code hue="yellow">warning</Code>

Props

hue

'grey' | 'red' | 'green' | 'yellow'

default:"'grey'"

Applies a color to the background and text.

size

'inherit' | 'small' | 'medium' | 'large'

default:"'inherit'"

Adjusts the font size. Defaults to inheriting from the surrounding text.

UnorderedList

UnorderedList renders a <ul> with styled list items. Nest UnorderedList.Item for each entry.

import { UnorderedList } from '@zendeskgarden/react-typography';

<UnorderedList>
  <UnorderedList.Item>First item</UnorderedList.Item>
  <UnorderedList.Item>Second item</UnorderedList.Item>
  <UnorderedList.Item>Third item</UnorderedList.Item>
</UnorderedList>

Marker style

<UnorderedList type="disc">…</UnorderedList>
<UnorderedList type="circle">…</UnorderedList>
<UnorderedList type="square">…</UnorderedList>

Props

size

'small' | 'medium' | 'large'

default:"'medium'"

Adjusts the vertical spacing between list items.

type

'disc' | 'circle' | 'square'

default:"'disc'"

Sets the list marker style.

OrderedList

OrderedList renders an <ol> with styled list items. Nest OrderedList.Item for each entry.

import { OrderedList } from '@zendeskgarden/react-typography';

<OrderedList>
  <OrderedList.Item>Install the package</OrderedList.Item>
  <OrderedList.Item>Add ThemeProvider</OrderedList.Item>
  <OrderedList.Item>Import a component</OrderedList.Item>
</OrderedList>

Marker style

<OrderedList type="decimal">…</OrderedList>
<OrderedList type="decimal-leading-zero">…</OrderedList>
<OrderedList type="lower-alpha">…</OrderedList>
<OrderedList type="upper-alpha">…</OrderedList>
<OrderedList type="lower-roman">…</OrderedList>
<OrderedList type="upper-roman">…</OrderedList>

Props

size

'small' | 'medium' | 'large'

default:"'medium'"

Adjusts the vertical spacing between list items.

type

default:"'decimal'"

Sets the ordered list marker style.

Span

Span is an inline text component that supports color (hue), bold weight, and monospace rendering. It also composes Span.Icon and Span.StartIcon for inline SVG icons.

import { MD, Span } from '@zendeskgarden/react-typography';

<MD>
  This field is <Span isBold>required</Span> and must be a valid{' '}
  <Span isMonospace>email</Span> address.
</MD>

Color

Pass a theme color variable key or hex value to the hue prop.

<Span hue="foreground.subtle">Secondary text</Span>
<Span hue="#c72a1c">Error text</Span>

Inline icons

Span.Icon renders an SVG icon sized to match surrounding text. Span.StartIcon adds leading spacing suitable for an icon that precedes text.

import CheckIcon from '@zendeskgarden/svg-icons/src/16/check-lg-fill.svg';
import InfoIcon from '@zendeskgarden/svg-icons/src/16/info-stroke.svg';

<MD>
  <Span>
    <Span.StartIcon>
      <InfoIcon />
    </Span.StartIcon>
    Read the documentation
  </Span>
</MD>

<MD>
  <Span hue="successHue">
    Saved
    <Span.Icon>
      <CheckIcon />
    </Span.Icon>
  </Span>
</MD>

Props

hue

string

Applies a font color. Accepts a theme color variable key (e.g. foreground.subtle) or a hex value.

isBold

boolean

Applies bold font weight. Inherits by default.

isMonospace

boolean

Renders text in a monospace font.

tag

any

default:"'span'"

Updates the rendered HTML element.

Paragraph

Paragraph renders a <p> element with standard body spacing. Use it for prose content within articles and documentation layouts.

import { Paragraph } from '@zendeskgarden/react-typography';

<Paragraph>
  Garden is Zendesk's open-source React design system. It provides accessible,
  themeable components for building customer service experiences.
</Paragraph>

size

'small' | 'medium' | 'large'

default:"'medium'"

Adjusts the font size of the paragraph.

Ellipsis

Ellipsis truncates overflowing text with an ellipsis (…). Wrap any inline or block text element to apply single-line overflow truncation.

import { Ellipsis, MD } from '@zendeskgarden/react-typography';

<MD>
  <Ellipsis>
    This is a very long piece of text that will be truncated when it overflows its container.
  </Ellipsis>
</MD>

Kbd

Kbd renders an inline keyboard shortcut styled as a key cap.

import { MD, Kbd } from '@zendeskgarden/react-typography';

<MD>
  Press <Kbd>Ctrl</Kbd> + <Kbd>K</Kbd> to open the command palette.
</MD>

CodeBlock

CodeBlock renders a multi-line syntax-highlighted code block. It is the block-level counterpart to the inline Code component.

import { CodeBlock } from '@zendeskgarden/react-typography';

<CodeBlock language="tsx">
  {`import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Button } from '@zendeskgarden/react-buttons';

const App = () => (
  <ThemeProvider>
    <Button isPrimary>Hello Garden</Button>
  </ThemeProvider>
);`}
</CodeBlock>

language

string

Language string for syntax highlighting (e.g. 'tsx', 'bash', 'json').

isNumbered

boolean

Shows line numbers in the gutter.

highlightLines

number[]

Array of line numbers to highlight.

Full example

import { ThemeProvider } from '@zendeskgarden/react-theming';
import {
  XXXL,
  LG,
  MD,
  SM,
  Blockquote,
  Code,
  UnorderedList,
  OrderedList,
  Span
} from '@zendeskgarden/react-typography';

const Article = () => (
  <ThemeProvider>
    <XXXL tag="h1" isBold>Getting started with Garden</XXXL>

    <LG tag="p">
      Garden is Zendesk's open-source design system for React.
      Install the package with <Code>npm install @zendeskgarden/react-typography</Code>.
    </LG>

    <Blockquote>
      <MD>Accessible by default, themeable by design.</MD>
    </Blockquote>

    <MD tag="h2" isBold>Installation steps</MD>
    <OrderedList>
      <OrderedList.Item>Install the package</OrderedList.Item>
      <OrderedList.Item>Wrap your app in <Code>ThemeProvider</Code></OrderedList.Item>
      <OrderedList.Item>Import and use components</OrderedList.Item>
    </OrderedList>

    <MD tag="h2" isBold>Features</MD>
    <UnorderedList>
      <UnorderedList.Item>WCAG 2.1 AA compliant</UnorderedList.Item>
      <UnorderedList.Item>Light and dark mode support</UnorderedList.Item>
      <UnorderedList.Item>RTL layout support</UnorderedList.Item>
    </UnorderedList>

    <SM>
      <Span hue="foreground.subtle">Last updated March 2026</Span>
    </SM>
  </ThemeProvider>
);

Get Started

Layout & Structure

Forms & Inputs

Overlays & Feedback

Navigation & Data

Display

Installation

Typescale components

Bold weight

Monospace

Typescale props

Blockquote

Props

Code

Hue

Props

UnorderedList

Marker style

Props

OrderedList

Marker style

Props

Span

Color

Inline icons

Props

Paragraph

Ellipsis

Kbd

CodeBlock

Full example

Build docs developers (and LLMs) love

Get Started

Layout & Structure

Forms & Inputs

Overlays & Feedback

Navigation & Data

Display

​Installation

​Typescale components

​Bold weight

​Monospace

​Typescale props

​Blockquote

​Props

​Code

​Hue

​Props

​UnorderedList

​Marker style

​Props

​OrderedList

​Marker style

​Props

​Span

​Color

​Inline icons

​Props

​Paragraph

​Ellipsis

​Kbd

​CodeBlock

​Full example

Build docs developers (and LLMs) love

Installation

Typescale components

Bold weight

Monospace

Typescale props

Blockquote

Props

Code

Hue

Props

UnorderedList

Marker style

Props

OrderedList

Marker style

Props

Span

Color

Inline icons

Props

Paragraph

Ellipsis

Kbd

CodeBlock

Full example