Typography

Text

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

Installation

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

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

watermelon add text

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

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

Import Text from your local UI registry output.

Import

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

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

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

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

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

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

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

prop	type	default	description
variant	"default" \| "h1" \| "h2" \| "h3" \| "h4" \| "p" \| "blockquote" \| "code" \| "lead" \| "large" \| "small" \| "muted"	"default"	Selects the typography scale and semantic role.
asChild	boolean	false	Lets the text styles be passed to a slot child.
className	string	-	Adds custom NativeWind classes on top of the variant.

Button