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)
Monospacetext-sm (13px)
Monospace lgtext-base (14px)
Monospace secondarytext-sm (13px)

Success

text-base (14px)

Error

text-base (14px)
 
import { Text } from "@cloudflare/kumo";

export function TextVariantsDemo() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="heading1" as="h1">
          Heading 1
        </Text>
        <Text variant="mono-secondary">text-3xl (30px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="heading2" as="h2">
          Heading 2
        </Text>
        <Text variant="mono-secondary">text-2xl (24px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="heading3" as="h3">
          Heading 3
        </Text>
        <Text variant="mono-secondary">text-lg (16px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text>Body</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text bold>Body bold</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="lg">Body lg</Text>
        <Text variant="mono-secondary">text-lg (16px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="sm">Body sm</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text size="xs">Body xs</Text>
        <Text variant="mono-secondary">text-xs (12px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="secondary">Body secondary</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono">Monospace</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono" size="lg">
          Monospace lg
        </Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="mono-secondary">Monospace secondary</Text>
        <Text variant="mono-secondary">text-sm (13px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="success">Success</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </div>
      <div className="flex flex-col justify-end gap-1 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
        <Text variant="error">Error</Text>
        <Text variant="mono-secondary">text-base (14px)</Text>
      </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>;
}

Semantic HTML

The variant prop controls visual styling only—it does not determine the HTML element rendered. Use the as prop to set the appropriate semantic element for your document outline:

// Heading variants render as <span> by default
<Text variant="heading1">Styled as h1, but renders a span</Text>

// Use `as` to set semantic heading levels
<Text variant="heading1" as="h1">Page Title</Text>
<Text variant="heading2" as="h2">Section Title</Text>
<Text variant="heading1" as="h3">Visually large, but semantically h3</Text>

The as prop accepts: "h1" through "h6", "p", and "span". Body variants default to "p", while heading and mono variants default to "span".

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. heading1, heading2 and heading3 variants) cannot use these props at all:

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

Truncate

Use the truncate prop to clip overflowing text with an ellipsis. This adds truncate min-w-0 classes, which is useful when Text is inside a flex or grid container.

This is a long piece of text that will be truncated with an ellipsis when it overflows its container.

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

export function TextTruncateDemo() {
  return (
    <div className="w-64 rounded-lg border border-kumo-hairline bg-kumo-base p-4">
      <Text truncate>
        This is a long piece of text that will be truncated with an ellipsis
        when it overflows its container.
      </Text>
    </div>
  );
}
<Text truncate>This is a long piece of text that will be truncated...</Text>

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).
truncateboolean-Whether to truncate overflowing text with an ellipsis. Adds `truncate min-w-0` classes.
as"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span"-The HTML element to render (`"h1"`-`"h6"`, `"p"`, or `"span"`). Defaults to `"p"` for body variants and `"span"` for headings/mono. Use this to set semantic heading levels.
childrenReactNode-Text content.