Text

Text renders typography styled according to active theme font families, sizes, line heights, and colors.

Usage

TypographyExample.tsx

import { Text, Box } from '@masumdev/rn-ui';

export function TypographyExample() {
  return (
    <Box gap="sm">
      <Text variant="h1">Heading Level 1</Text>
      <Text variant="h3" color="primary">Heading Level 3</Text>
      <Text variant="body" color="textMuted">Body paragraph styled with theme typography.</Text>
      <Text variant="caption" color="textSubtle">Caption timestamp or label footer.</Text>
    </Box>
  );
}

Props API

Prop	Type	Default	Description
children	ReactNode	—	Text content.
variant	'h1' | 'h2' | 'h3' | 'h4' | 'title1' | 'title2' | 'body' | 'bodySmall' | 'label' | 'labelSmall' | 'caption'	'body'	Typography scale variant.
color	ThemeColorName	'text'	Theme color token.
align	'auto' | 'left' | 'right' | 'center' | 'justify'	—	Text alignment.