# @cloudflare/component-text

> Cloudflare Text Component

Latest version **5.1.4** (published 2026-10-06) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @cloudflare/component-text
pnpm add @cloudflare/component-text
yarn add @cloudflare/component-text
bun add @cloudflare/component-text
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 5.1.4 |
| Published | 2026-10-06 |
| First published | 2018-05-09 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 125.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | James Kyle <jkyle@cloudflare.com> |
| Maintainers | cf-ci-write, dash_service_account, wrangler-publisher, cf-npm-publish |

## Links

- npm: https://www.npmjs.com/package/@cloudflare/component-text
- npm.io page: https://npm.io/package/@cloudflare/component-text

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [@cloudflare/types](https://npm.io/package/@cloudflare/types.md) ^6.21.15

## Recent versions

- 5.1.4 (latest) — 2026-10-06
- 5.1.3 — 2026-06-30
- 5.1.2 — 2026-01-22
- 5.1.1 — 2026-01-21
- 5.1.0 — 2025-10-14
- 5.0.3 — 2025-09-10
- 5.0.2 — 2025-05-22
- 5.0.1 — 2025-05-09
- 5.0.0 — 2025-05-08
- 4.0.8 — 2025-04-30
- 4.0.7 — 2025-03-27
- 4.0.6 — 2024-05-23
- 4.0.5 — 2024-05-16
- 4.0.4 — 2024-05-14
- 4.0.3 — 2024-03-20
- … 506 more at https://npm.io/package/@cloudflare/component-text/versions

## README

# @cloudflare/component-text

> Cloudflare Text Component

## Installation
Installation with yarn is recommended

```sh

$ yarn add @cloudflare/component-text

```

## Usage

```jsx
import React from 'react';
import { Text } from '../../src';

const TextComponent = () => (
  <div>
    <p>
      Specify a <code>size</code>
    </p>
    <Text size="normal">Hello World</Text>
    <Text size="small">Hello World</Text>
    <Text size="normal" weight="semi-bold">
      Hello World
    </Text>
    <Text size="normal" weight="bold">
      Hello World
    </Text>

    <p>
      and/or an <code>align</code>
    </p>
    <Text align="start">Hello World</Text>
    <Text align="center">Hello World</Text>
    <Text align="justify">Hello World</Text>
    <Text align="end">Hello World</Text>

    <p>
      and/or a <code>type</code>
    </p>
    <Text type="info">Hello World</Text>
    <Text type="success">Hello World</Text>
    <Text type="warning">Hello World</Text>
    <Text type="error">Hello World</Text>
    <Text type="muted">Hello World</Text>

    <p>
      and/or a <code>case</code>
    </p>
    <Text case="capitalize">hello world</Text>
    <Text case="titlecase">hello world</Text>
    <Text case="lowercase">Hello World</Text>
    <Text case="uppercase">Hello World</Text>
  </div>
);

export default TextComponent;

```

---
_Source: https://npm.io/package/@cloudflare/component-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._