Text

Primitives

Typed typography component with 13 semantic variants, 6 weight presets, color tokens, alignment, transform, and truncation support.

GitHub

Installation

bash

npx native-mate add text

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Text } from '~/components/ui/text'

// Variants
<Text variant="h1">Page Title</Text>
<Text variant="h3">Section heading</Text>
<Text variant="body">Regular paragraph text.</Text>
<Text variant="caption">Hint or metadata</Text>
<Text variant="overline">Section label</Text>
<Text variant="code">{'const x = 42'}</Text>

// Weights
<Text weight="bold">Bold label</Text>
<Text weight="light">Light note</Text>

// Colors (theme tokens)
<Text color="primary">Accent text</Text>
<Text color="success">All good</Text>
<Text color="destructive">Error message</Text>
<Text muted>Helper text</Text>

// Alignment
<Text align="center">Centered</Text>

// Truncation
<Text numberOfLines={1}>This long line will be cut…</Text>

Props

Prop	Type	Default	Description
variant	"h1"\|"h2"\|"h3"\|"h4"\|"h5"\|"h6"\|"body"\|"bodyLarge"\|"bodySmall"\|"label"\|"caption"\|"overline"\|"code"	"body"	Semantic typography preset — sets size, weight, and line-height.
weight	"light"\|"regular"\|"medium"\|"semibold"\|"bold"\|"extrabold"	—	Override the font weight independently of the variant.
color	"foreground"\|"muted"\|"primary"\|"destructive"\|"success"\|"warning"\|string	—	Semantic color token or raw hex/rgb value.
align	"left"\|"center"\|"right"\|"justify"	—	Horizontal text alignment.
size	number	—	Explicit font-size in dp that overrides the variant size.
transform	"none"\|"uppercase"\|"lowercase"\|"capitalize"	—	CSS-like text transform.
muted	boolean	false	Shorthand for color="muted".
numberOfLines	number	—	Truncates text after N lines.
selectable	boolean	false	Enables text selection and copy on long-press.

Example

tsx

import { Text } from '~/components/ui/text'
import { View } from 'react-native'

export function TypographyScale() {
  return (
    <View style={{ gap: 8, padding: 16 }}>
      <Text variant="h1">H1 — 36/700</Text>
      <Text variant="h2">H2 — 30/700</Text>
      <Text variant="h3">H3 — 24/600</Text>
      <Text variant="body">Body — 15/400</Text>
      <Text variant="caption" muted>Caption — 11/400</Text>
      <Text variant="overline">Overline</Text>
      <Text color="primary" weight="semibold">Primary semibold</Text>
      <Text color="success">Success</Text>
      <Text color="destructive">Destructive</Text>
    </View>
  )
}

Accessibility

Feature	Detail
Selectable	Pass selectable to allow users to copy text content.
Label	Pass accessibilityLabel to override the read-out text for screen readers.

Icon