Text
@cloudflare/kumo

Text

A typography component for various heading and copy styles.

Heading 1

text-3xl (30px)

Heading 2

text-2xl (24px)

Heading 3

text-lg (16px)

Body

text-base (14px)

Body bold

text-base (14px)

Body lg

text-lg (16px)

Body sm

text-sm (13px)

Body xs

text-xs (12px)

Body secondary

text-base (14px)

Monospace

text-sm (13px)

Monospace lg

text-base (14px)

Monospace secondary

text-sm (13px)

Success

text-base (14px)

Error

text-base (14px)

 
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 w-full">
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="heading1">Heading 1</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-3xl (30px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="heading2">Heading 2</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-2xl (24px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="heading3">Heading 3</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-lg (16px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text>Body</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-base (14px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text bold>Body bold</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-base (14px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text size="lg">Body lg</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-lg (16px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text size="sm">Body sm</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-sm (13px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text size="xs">Body xs</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-xs (12px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="secondary">Body secondary</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-base (14px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="mono">Monospace</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-sm (13px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="mono" size="lg">
      Monospace lg
    </Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-base (14px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="mono-secondary">Monospace secondary</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-sm (13px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="success">Success</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-base (14px)
    </p>
  </div>
  <div className="flex flex-col gap-1 rounded-lg border border-kumo-line bg-kumo-base p-4 justify-end">
    <Text variant="error">Error</Text>
    <p className="text-xs text-kumo-subtle font-mono">
      text-base (14px)
    </p>
  </div>
</div>

Installation

Barrel 

import { Text } from "@cloudflare/kumo";

Granular

import { Text } from "@cloudflare/kumo/components/text";

Usage 

import { Text } from "@cloudflare/kumo";

export default function Example() {
  return <Text>Your content here</Text>;
}

Restrictions

The bold and size props are intentionally restricted to the base, secondary, success, and error text variants. 

<Text size="sm" bold>Body</Text>
<Text variant="secondary" bold>Body secondary</Text>
<Text variant="success" size="lg">Success</Text>
<Text variant="error">Error</Text>

Monospace variants (mono and mono-secondary) can only set size to lg and cannot use the bold prop: 

<Text variant="mono">Monospace</Text>
<Text variant="mono" size="lg">Monospace</Text>
<Text variant="mono" bold>Monospace</Text> // Doesn't compile

Headings (i.e. h1, h2 and h3 variants) cannot use these props at all: 

<Text variant="h1" bold>Heading 1</Text> // Doesn't compile

API Reference

PropTypeDefaultDescription
variant"heading1" | "heading2" | "heading3" | "body" | "secondary" | "success" | "error" | "mono" | "mono-secondary""body"Text style variant. Determines color, font, and weight. - `"heading1"` — Large page title (30px, semibold) - `"heading2"` — Section title (24px, semibold) - `"heading3"` — Subsection title (18px, semibold) - `"body"` — Default body text - `"secondary"` — Muted text for secondary information - `"success"` — Success state text - `"error"` — Error state text - `"mono"` — Monospace text for code - `"mono-secondary"` — Muted monospace text
size"xs" | "sm" | "base" | "lg""base"Text size (only applies to body/secondary/success/error variants). - `"xs"` — 12px - `"sm"` — 14px - `"base"` — 16px - `"lg"` — 18px
boldboolean-Whether to use bold font weight (only applies to body variants).
asReact.ElementType-The HTML element type to render as (e.g. `"span"`, `"p"`, `"h1"`). Auto-selected based on variant if omitted.
childrenReactNode-Text content.