Typography

lvcn provides a Text component with built-in variants and a set of conventions for consistent typography across your React Native app.

Text component

The Text component is the primary way to render styled text. It supports semantic variants via the variant prop.

npx lovdacn@latest add text
# or
npx lvcn@latest add text

Import

import { Text } from "@/components/ui/text"

Variants

<Text variant="h1">Heading 1</Text>
<Text variant="h2">Heading 2</Text>
<Text variant="h3">Heading 3</Text>
<Text variant="h4">Heading 4</Text>
<Text variant="large">Large text</Text>
<Text>Default body text</Text>
<Text variant="small">Small text</Text>
<Text variant="muted">Muted text</Text>
<Text variant="lead">Lead paragraph</Text>

Variant reference

All variants use the text-foreground color by default except muted, which uses text-muted-foreground.

Font configuration

NativeWind

Fonts are loaded via expo-font and mapped to Tailwind classes in your tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", "system-ui", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
    },
  },
}

Then load the font in your root layout:

import { useFonts } from "expo-font"

export default function RootLayout() {
  const [loaded] = useFonts({
    Inter: require("../assets/fonts/Inter.ttf"),
  })

  if (!loaded) return null

  return <Stack />
}

Uniwind

Uniwind projects define fonts via @theme tokens in CSS:

@theme {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

Composing with className

All Text variants can be further customized with Tailwind classes:

<Text variant="h2" className="text-primary tracking-wider">
  Custom heading
</Text>

<Text className="text-lg font-bold text-destructive">
  Error message
</Text>

Platform considerations

• On native (iOS/Android), Text renders a React Native <Text> element with NativeWind styles.
• On web (Expo Web), it renders a <span> or <p> depending on your configuration, styled with the same utility classes.

The Text component handles platform differences internally — you don't need Platform.select for basic typography.

Accessibility

• Use semantic variants (h1, h2, etc.) for heading hierarchy. On web these map to appropriate accessibilityRole or HTML elements.
• Use the accessibilityLabel prop when text alone doesn't convey meaning (e.g., icon-only labels).

Related

• Text component — full API reference
• Theming — token-based color system
• Dark Mode — light/dark text colors