Text

Typography component with semantic variants.

typographytextdisplay

Import

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

Basic Usage

Text Preview

Body large text

Body medium text — the default

Body small text

Caption text — secondary information

Overline text

const x = 42;

Primary

Muted

Destructive

Code

tsx

<Text>This is body text</Text>

Variants

Typography variants

1<div className="space-y-2">
2  <Text variant="h1">Heading 1</Text>
3  <Text variant="h2">Heading 2</Text>
4  <Text variant="h3">Heading 3</Text>
5  <Text variant="h4">Heading 4</Text>
6  <Text variant="body">Body text</Text>
7  <Text variant="small">Small text</Text>
8  <Text variant="muted">Muted text</Text>
9</div>

Colors

Different text colors

1<div className="space-y-1">
2  <Text color="default">Default color</Text>
3  <Text color="muted">Muted color</Text>
4  <Text color="primary">Primary color</Text>
5  <Text color="destructive">Destructive color</Text>
6</div>

As Different Elements

Render as specific HTML elements

1<Text variant="h1" as="h2">
2  Styled as h1, rendered as h2
3</Text>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring