---
applyTo: "**/*.tsx,**/*.jsx"
---

# @cfx-dev/ui-components — Typography Components

## Text

The primary text component. Renders a `<span>` by default:

```tsx
import { Text, TextBlock } from '@cfx-dev/ui-components';

<Text size="small" weight="bold" color="primary">Hello</Text>

// As a block element (div)
<TextBlock size="medium">Paragraph content</TextBlock>

// Heading
<Text as="h2" size="xlarge" weight="bold">Section Title</Text>

// With opacity
<Text color="primary" opacity="50">Dimmed text</Text>

// Responsive size
<Text size={{ initial: 'small', bp768: 'medium', bp1280: 'large' }}>
  Responsive text
</Text>
```

### Text Sizes

`xxxsmall`, `xxsmall`, `xsmall`, `small` (default), `medium`, `large`, `xlarge`, `xxlarge`, `xxxlarge`, `xxxxlarge`.

All sizes are responsive by default — they scale across breakpoints (mobile → tablet → desktop → large desktop) automatically via the token system.

### Text Weights

`thin` (100), `regular` (400), `bold` (700), `bolder` (800).

### Text Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `as` | `'span' \| 'div' \| 'p' \| 'label' \| 'h1'..'h6'` | `'span'` | HTML element |
| `size` | `ResponsiveValueType<TextSize>` | `'small'` | Font size token |
| `weight` | `'thin' \| 'regular' \| 'bold' \| 'bolder'` | `'regular'` | Font weight |
| `family` | `'primary' \| 'secondary'` | auto | Font family (HelveticaNowText / Display) |
| `color` | `ColorType \| 'inherit'` | `'primary'` | Text color from theme palette |
| `opacity` | `'0' \| '25' \| '50' \| '75' \| '100' \| number` | `1` | Text opacity |
| `letterSpacing` | `'small' \| 'large' \| 'xlarge'` | `'small'` | Letter spacing |
| `lineHeight` | `ResponsiveValueType<TextSize \| number>` | same as `size` | Line height |
| `centered` | `boolean` | `false` | Center-align text |
| `truncated` | `boolean` | `false` | Truncate with ellipsis |
| `typographic` | `boolean` | `false` | Enable paragraph spacing for multiline |
| `uppercase` | `boolean` | `false` | Transform to uppercase |
| `userSelectable` | `boolean` | `false` | Allow text selection |
| `underlined` | `boolean` | `false` | Underline decoration |
| `strikethrough` | `boolean` | `false` | Strikethrough decoration |

### Color Props

Text supports the unified `GetColorProps` interface:

```tsx
// Named theme color
<Text color="accent">Pink text</Text>
<Text color="green">Success text</Text>
<Text color="secondary" opacity="50">Muted text</Text>

// Color with luminance (50-950 scale)
<Text color="primary" luminance={700}>Lighter primary</Text>

// Direct color token reference
<Text colorToken="button-primary-text">Token-based color</Text>
```

Available colors: `accent`, `primary`, `secondary`, `tertiary`, `green`, `yellow`, `red`, `argentum`, `aurum`, `platinum`, `bg`, `bg-light`, `bg-dark`, `bg-dark-grey`, `bg-black`.

## Label

Styled label for form fields:

```tsx
import { Label } from '@cfx-dev/ui-components';

<Label>Field label</Label>
```

## Prose

Rich text container for rendering user-generated or markdown content with proper typography styles:

```tsx
import { Prose } from '@cfx-dev/ui-components';

<Prose>
  <h2>Title</h2>
  <p>Paragraph with <a href="#">links</a> and <strong>bold</strong> text.</p>
</Prose>
```

## Font Families

- `primary` — HelveticaNowText (body text, UI)
- `secondary` — HelveticaNowDisplay (headings, display text)

Headings (`h1`–`h6`) automatically use the `secondary` family. The `family` prop overrides this.