Components
Text
Renders styled text content with consistent typography.
Overview
Text renders styled text content using semantic HTML elements. It provides consistent typography through size, weight, color, and alignment variants. Use Text for body content, descriptions, helper text, and any non-heading text.
Sizes
xsThe quick brown fox jumps over the lazy dog
smThe quick brown fox jumps over the lazy dog
baseThe quick brown fox jumps over the lazy dog
lgThe quick brown fox jumps over the lazy dog
xlThe quick brown fox jumps over the lazy dog
Colors
Default foreground
Muted foreground
Primary color
Destructive color
Usage
export function Example() {
return <Text>The quick brown fox jumps over the lazy dog.</Text>;
}Variants
Sizes
<Text size="xs">Extra small</Text>
<Text size="sm">Small</Text>
<Text size="base">Base (default)</Text>
<Text size="lg">Large</Text>
<Text size="xl">Extra large</Text>Colors
<Text color="default">Default text</Text>
<Text color="muted">Muted text</Text>
<Text color="primary">Primary text</Text>
<Text color="destructive">Destructive text</Text>
<Text color="success">Success text</Text>Weights
<Text weight="regular">Regular</Text>
<Text weight="medium">Medium</Text>
<Text weight="semibold">Semibold</Text>
<Text weight="bold">Bold</Text>Semantic Elements
<Text as="p">Paragraph</Text>
<Text as="em">Emphasized</Text>
<Text as="strong">Strong</Text>
<Text as="span">Inline span</Text>Accessibility
- Use semantic elements where appropriate (
<p>,<em>,<strong>) - Color alone should not convey meaning — pair with icons or text cues
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | 'p' | 'span' | 'div' | 'em' | 'strong' | 'p' | HTML element |
size | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'base' | Font size |
weight | 'regular' | 'medium' | 'semibold' | 'bold' | 'regular' | Font weight |
color | 'default' | 'muted' | 'primary' | 'destructive' | 'success' | 'default' | Text color |
align | 'left' | 'center' | 'right' | 'left' | Text alignment |
className | string | — | Additional CSS classes |
children | ReactNode | — | Text content (required) |
Related Components
| Component | When to Use Instead |
|---|---|
| Heading | For section titles and headings |
| Label | For form input labels |
| Code | For code snippets |