Typography

Text

A semantic text primitive for paragraphs, headings, inline code, muted copy, and reusable typography scales.

SourceRegistry

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

1

Install the component

Run the registry command below to add text to your project.

watermelon add text
2

Install manual dependencies

If you are wiring the component manually, install the package dependencies shown below.

npm install @rn-primitives/slot class-variance-authority
3

Import the component

Import Text from your local UI registry output.

Import

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

Import

Import

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

Usage

The Text component lets you define hierarchy once and reuse it across native screens, settings pages, and longer-form product surfaces.

Headings

Use heading variants to create clear section breaks and semantic roles.

Headings

<Text variant="h1">Ship native UI faster.</Text>
<Text variant="h2">Overview</Text>
<Text variant="h3">Installation</Text>

Body Copy

Pair p, lead, muted, and small for readable layouts with more contrast control.

Body Copy

<Text variant="lead">A composable type system for React Native.</Text>
<Text variant="p">
Build headings, helper text, and long-form copy from one primitive.
</Text>
<Text variant="muted">Updated 2 minutes ago</Text>

Inline Code

Use the inline code style for package names, props, and snippets that need stronger emphasis.

Inline Code

<Text>
Install <Text variant="code">watermelon add text</Text> to copy the primitive
into your project.
</Text>

API Reference

Text extends the React Native Text API and adds a variant prop for semantic styling.

proptypedefaultdescription
variant"default" | "h1" | "h2" | "h3" | "h4" | "p" | "blockquote" | "code" | "lead" | "large" | "small" | "muted""default"Selects the typography scale and semantic role.
asChildbooleanfalseLets the text styles be passed to a slot child.
classNamestring-Adds custom NativeWind classes on top of the variant.

Previous

Button