Components

Text

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

Heading 1

Lead text for introductions and high-signal summaries.

Paragraph text lets you judge rhythm, spacing, and contrast in both light and dark mode without leaving the docs page.

watermelon add text

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.

A composable type system for React Native.

Build headings, helper text, and long-form copy from one primitive.

Updated 2 minutes ago

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

Install watermelon add text to copy the primitive into your project.

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.