Text

The Text component is a foundational typography primitive built on React Native's Text component with NativeWind styling. It supports multiple semantic variants — from headings to body text, blockquotes, and muted labels — providing a consistent typographic system across your application.

Preview

Installation

npx novaui-cli add text

Import

import { Text } from 'novaui-components'

Basic Usage

By default, the Text component renders with text-base text-foreground:

import { Text } from 'novaui-components'

export function BasicText() {
  return <Text>This is default text content.</Text>
}

Variants

Headings

Use heading variants for titles and section headers:

<Text variant="h1">Heading 1</Text>
<Text variant="h2">Heading 2</Text>
<Text variant="h3">Heading 3</Text>
<Text variant="h4">Heading 4</Text>

Paragraph

Optimized for body text with comfortable leading:

<Text variant="p">
  The quick brown fox jumps over the lazy dog. This paragraph text uses a relaxed
  line height for comfortable reading across multiple lines of content.
</Text>

Lead

Larger, muted text for introductions or subtitles:

<Text variant="lead">A beautiful component library for React Native with web support.</Text>

Large

Semibold larger text for emphasis:

<Text variant="large">Important notice</Text>

Small

Compact, medium-weight text for fine print:

<Text variant="small">Small caption text</Text>

Muted

Subdued text for secondary or supporting information:

<Text variant="muted">Last updated 3 days ago</Text>

Blockquote

Styled text for quotes with a left border and italic formatting:

<Text variant="blockquote">
  "The best way to predict the future is to create it."
</Text>

Props API

TextProps

Extends React.ComponentPropsWithoutRef<typeof Text> and includes:

Best Practices

1. Use semantic variants: Choose variants that match the content's purpose — h1-h4 for headings, p for body text, muted for secondary info.

2. Maintain hierarchy: Use heading variants in order (h1 > h2 > h3 > h4) to create a clear visual hierarchy.

3. Consistent usage: Use the same variant for the same type of content throughout your app.

4. Accessibility: Heading variants don't automatically set accessibility roles on native — consider adding accessibilityRole="header" when needed.

5. Don't nest Text: In React Native, nested Text components inherit styles. Use a single Text with the appropriate variant instead.

Related Components

• Use Typography (H1-H5, P) for components with built-in accessibility roles
• Combine with Label for form field labels
• Pair with Badge for labeled content