Text

A semantic typography component. Describes what the text is — heading, label, caption, code — not how it looks.

Text maps a role to the correct HTML element and Tailwind typography classes. Instead of remembering which combination of text-xs font-medium uppercase tracking-wide means "a field label," you say role="label".

All roles

Heading — section title

Body — default paragraph text for reading and descriptions.

Label — uppercase field or section tagCaption — supporting or secondary information

Muted — deemphasized helper text

code — monospace inline reference

<Text role="heading">Heading</Text>
<Text role="body">Body paragraph text</Text>
<Text role="label">Field label</Text>
<Text role="caption">Supporting information</Text>
<Text role="muted">Deemphasized helper text</Text>
<Text role="code">inline-code-reference</Text>

Element mapping

Each role renders a semantically appropriate element by default:

Role	Default element
`heading`	`<h2>`
`body`	`<p>`
`label`	`<span>`
`caption`	`<span>`
`muted`	`<p>`
`code`	`<code>`

Override the element with as when structure requires it:

<Text role="label" as="label" htmlFor="email">Email address</Text>
<Text role="heading" as="h1">Page title</Text>

Props

Prop	Type	Default	Description
`role`	`"heading" \| "body" \| "label" \| "caption" \| "muted" \| "code"`	`"body"`	Semantic role. Determines element and style.
`as`	`string`	—	Override the rendered HTML element.
`className`	`string`	—	Additional classes for layout or one-off adjustments.

Source

packages/ui/src/text.tsx — copy into components/ui/text.tsx in your project.