Text

tsx

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

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

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.