---
title: Text
description: Text primitives with themes custom to each font
name: text
component: Paragraph
package: text
demoName: Text
---

<HeroContainer demoMultiple>
  <TextDemo />
</HeroContainer>

```tsx hero template=Text

```

<Highlights
  features={[
    'Themes that give you control over spacing, weights, and sizes custom to each font.',
    'Size prop that automatically matches all theme values.',
    'Media query styles, hoverStyle, pressStyle, focusStyle.',
  ]}
/>

<Notice theme="green">
  The base `Text` component is already included in `@tamagui/core` (and `tamagui`). This
  package is optional and adds `SizableText` and `Paragraph`, which extend `Text` with the
  `size` prop and theme-aware defaults.
</Notice>

## Installation

If you're using `tamagui`, `SizableText` and `Paragraph` are already included. Otherwise, install independently:

```bash
npm install @tamagui/text
```

## Usage

```tsx
export default () => (
  <>
    <Text>Text</Text>
    <SizableText>Sizable Text</SizableText>
    <Paragraph>Paragraph</Paragraph>
  </>
)
```

## Text

Text in Tamagui matches Text in react-native-web, with the added [Tamagui props](/docs/intro/props).

It explicitly does not inherit your theme color or other font properties, as it is meant to be plain and used for extension. Below, we show `SizableText` which extends Text, and `Paragraph` which extends SizableText. Generally, Paragraph is the useful component as it uses theme values, while you can extend Text if you want to derive your own design system.

```tsx
import { Text, XStack, YStack } from 'tamagui'

export default () => (
  <>
    <Text
      // can add theme values
      color="$white"
      fontFamily="$body"
      // or just use direct values
      fontSize={20}
      hoverStyle={{
        color: '$colorHover',
      }}
    >
      Lorem ipsum
    </Text>
  </>
)
```

## SizableText

Tamagui lets you define font sizing, spacing, line height, letter spacing and other properties with `createFont`, of which you can have many different configurations. We've found a nice pattern is to "align" all your keys across these sub-objects.

SizableText adds a `size` property that is defined using a [spread variant](/docs/core/styled#spread-variants) which looks for a matching key on each of these properties (using `@tamagui/get-font-sized`):

- color
- fontStyle
- textTransform
- fontFamily
- fontWeight
- letterSpacing
- fontSize
- lineHeight

So, if you've defined `small`, `medium` and `large` keys on each createFont category, you can use it like so:

```tsx
<SizableText size="$small" />
```

[Source code for SizableText](https://github.com/tamagui/tamagui/blob/main/code/ui/text/src/SizableText.tsx).

## Paragraph

Paragraph extends SizableText and is defined as:

```tsx
export const Paragraph = styled(SizableText, {
  name: 'Paragraph',
  tag: 'p',
  userSelect: 'auto',
  color: '$color',
  size: '$true',
  whiteSpace: 'normal',
})
```

<Notice>
  Note: Paragraph renders to a `p` tag on web, which can cause issues when you nest them
  during SSR. If you don't mind rendering to a span, use `SizableText`, otherwise, be
  careful when nesting items inside a Paragraph.
</Notice>

## Inline Text Elements

For semantic inline text styling, `@tamagui/text` exports `Strong`, `Em`, and `Span`:

```tsx
import { Strong, Em, Span, Paragraph } from '@tamagui/text'

export default () => (
  <Paragraph>
    This is <Strong>bold text</Strong>, this is <Em>italic text</Em>, and this is a{' '}
    <Span color="$blue10">colored span</Span>.
  </Paragraph>
)
```

These render to their corresponding HTML elements (`<strong>`, `<em>`, `<span>`) on web while remaining compatible with React Native.