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.
Install the component
Run the registry command below to add text to your project.
watermelon add textInstall manual dependencies
If you are wiring the component manually, install the package dependencies shown below.
npm install @rn-primitives/slot class-variance-authorityImport 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
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.
| 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. |