ObjectUIComponentsBasic
Text
Display text with standardized typography styles
The Text component displays text content with predefined typography variants.
Basic Usage
Simple Text
Basic text without any styling
{
"type": "text",
"content": "Hello, World!"
}Variants
Heading 1
{
"type": "text",
"content": "Heading 1",
"variant": "h1"
}Heading 2
{
"type": "text",
"content": "Heading 2",
"variant": "h2"
}Heading 3
{
"type": "text",
"content": "Heading 3",
"variant": "h3"
}Paragraph
{
"type": "text",
"content": "Paragraph text",
"variant": "p"
}Lead
{
"type": "text",
"content": "Lead text for introductions",
"variant": "lead"
}Large
{
"type": "text",
"content": "Large text",
"variant": "large"
}Small
{
"type": "text",
"content": "Small text",
"variant": "small"
}Muted
{
"type": "text",
"content": "Muted text",
"variant": "muted"
}Schema
interface TextSchema {
type: 'text';
content: string; // Text content to display
value?: string; // Alias for content
variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'lead' | 'large' | 'small' | 'muted';
align?: 'left' | 'center' | 'right' | 'justify';
color?: string; // Tailwind color class
className?: string; // Additional CSS classes
}Examples
Colored Text
Text with Colors
{
"type": "flex",
"gap": 4,
"children": [
{
"type": "text",
"content": "Primary Text",
"color": "text-primary"
},
{
"type": "text",
"content": "Destructive Text",
"color": "text-destructive"
},
{
"type": "text",
"content": "Muted Text",
"color": "text-muted-foreground"
}
]
}Text Alignment
Text Alignment
{
"type": "stack",
"gap": 4,
"children": [
{
"type": "text",
"content": "Left aligned text",
"align": "left"
},
{
"type": "text",
"content": "Center aligned text",
"align": "center"
},
{
"type": "text",
"content": "Right aligned text",
"align": "right"
}
]
}