{"@context":"https://schema.org","@graph":[{"@type":"TechArticle","headline":"Text","description":"The Text component wraps the native paragraph element to deliver consistent typography, responsive sizing, and muted colors for readable content across layouts.","url":"https://intentui.com/docs/components/surfaces/text","author":{"@type":"Person","name":"Irsyad","url":"https://x.com/irsyad"},"publisher":{"@type":"Organization","name":"Intent UI","url":"https://intentui.com","logo":{"@type":"ImageObject","url":"https://intentui.com/icon.svg"}},"mainEntityOfPage":{"@type":"WebPage","@id":"https://intentui.com/docs/components/surfaces/text"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://intentui.com"},{"@type":"ListItem","position":2,"name":"Docs","item":"https://intentui.com/docs"},{"@type":"ListItem","position":3,"name":"Components","item":"https://intentui.com/docs/components"},{"@type":"ListItem","position":4,"name":"Surfaces","item":"https://intentui.com/docs/components/surfaces"},{"@type":"ListItem","position":5,"name":"Text","item":"https://intentui.com/docs/components/surfaces/text"}]}]}
Surfaces
Text
The Text component wraps the native paragraph element to deliver consistent typography, responsive sizing, and muted colors for readable content across layouts.
The quick brown fox jumps over the lazy dog
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/text
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm
pnpm
yarn
bun
npm install tailwind-merge tailwind-variants
Anatomy
import { Text } from "@/components/ui/text"
<Text>The quick brown fox jumps over the lazy dog</Text>Examples
Text link
Loading...
Component API
Code
The Code component renders inline code text.
| Prop | Type | Default |
|---|---|---|
className | string | - |
Strong
The Strong component renders emphasized text.
| Prop | Type | Default |
|---|---|---|
className | string | - |
Text
The Text component renders paragraph text.
| Prop | Type | Default |
|---|---|---|
className | string | - |
TextLink
The TextLink component renders a styled text link.
| Prop | Type | Default |
|---|---|---|
className | string | - |
Intent UI Design
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.