Text

Installation

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

yarn
npm
bun
pnpm
yarn add @tamagui/text
Copy

Usage

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

Text

Text in Tamagui matches Text in react-native-web, with the added Tamagui 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.

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>
  </>
)
Copy

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 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:

<SizableText size="$small" />
Copy

Source code for SizableText .

Paragraph

Paragraph extends SizableText and is defined as:

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

Inline Text Elements

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

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>
)
Copy

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

Text Truncation

Tamagui provides two props for truncating text with ellipsis: ellipsis for single-line truncation and numberOfLines for multi-line clamping.

Use the ellipsis prop to truncate text to a single line with an ellipsis:

import { Text, SizableText, Paragraph } from 'tamagui'

export default () => (
  <Paragraph ellipsis maxWidth={200}>
    This is a very long text that will be truncated with an ellipsis when it overflows.
  </Paragraph>
)
Copy

On web, this applies text-overflow: ellipsis, white-space: nowrap, and overflow: hidden. On native, it sets numberOfLines={1}.

Use the numberOfLines prop to clamp text to a specific number of lines:

import { Paragraph } from 'tamagui'

export default () => (
  <>
    <Paragraph numberOfLines={1} maxWidth={200}>
      Single line truncation, same as ellipsis.
    </Paragraph>

    <Paragraph numberOfLines={3} maxWidth={200}>
      This text will be clamped to three lines. Any overflow beyond the third
      line will be hidden. This is useful for card descriptions or preview text
      where you want to show a limited amount of content.
    </Paragraph>
  </>
)
Copy

On web, multi-line clamping uses -webkit-line-clamp with -webkit-box display. On native, it passes numberOfLines directly to the React Native Text component.

API Reference

The base text component from @tamagui/core. Accepts all Tamagui style props for text elements.

Extends Text with the size prop for theme-aware font sizing.

Extends SizableText with semantic defaults. Renders as <p> on web, uses theme color, and sets userSelect: 'auto' and whiteSpace: 'normal'.