Typography

Semantic text components covering headings, body, caption, and code styles from the type scale.

Examples

Display

Hero-scale display heading using the display font family.

Build beautiful interfaces

Heading

Section headings at h2, h3, and h4 scale.

Section heading

Subsection heading

Minor heading

Body

Paragraph text at base and small sizes.

The Rokle design system provides a consistent set of components and tokens that adapt to any brand personality - from minimal and structured to expressive and playful.

Secondary body copy sits at a smaller size and uses a slightly muted colour to create visual hierarchy without distraction.

Caption

Small caption and label text styles.

Category labelLast updated 24 Apr 2026 at 09:41Figure 1 - Token hierarchy diagram

Code

Inline code and monospaced text styles.

Use the registerExamples() function to add examples.

import { registerExamples } from "@/lib/component-examples";

Full hierarchy

All type levels together to illustrate the complete scale.

AaDisplay / 4xl

AaHeading / 2xl

AaSubheading / xl

AaLead / lg

AaBody / base

AaSmall / sm

AaCaption / xs

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Typography } from "@rokle/components";

import { Typography } from "@rokle/components";

export function Example() {
  return <Typography />;
}

API Reference

Prop	Type	Default	Description
variant	"h1" \| "h2" \| "h3" \| "h4" \| "body" \| "caption" \| "code"	"body"	Type scale variant.
children	ReactNode	-	Text content.
className	string	-	Additional CSS classes.

Previous← TreeView NextAlert →