Text

lunar add text

import { Text } from '@/components/ui/text';

<Text>Default text</Text>

// Default
<Text variant="default">Default text</Text>
 
// Header - Bold, large text
<Text variant="header">Header Text</Text>
 
// Title - Semibold text
<Text variant="title">Title Text</Text>
 
// Label - Medium weight, uppercase
<Text variant="label">Label Text</Text>
 
// Body - Normal weight
<Text variant="body">Body text for paragraphs</Text>
 
// Caption - Small, muted
<Text variant="caption">Caption text</Text>
 
// Muted - Dimmed color
<Text variant="muted">Muted text</Text>
 
// Error - Destructive color
<Text variant="error">Error message</Text>
 
// Success - Green color
<Text variant="success">Success message</Text>

// Header sizes
<Text variant="header" size="sm">Small Header (24px)</Text>
<Text variant="header" size="md">Medium Header (30px)</Text>
<Text variant="header" size="lg">Large Header (36px)</Text>
<Text variant="header" size="xl">XL Header (48px)</Text>
 
// Title sizes
<Text variant="title" size="sm">Small Title (18px)</Text>
<Text variant="title" size="md">Medium Title (20px)</Text>
<Text variant="title" size="lg">Large Title (24px)</Text>
<Text variant="title" size="xl">XL Title (30px)</Text>
 
// Body/Default sizes
<Text size="sm">Small (14px)</Text>
<Text size="md">Medium (16px)</Text>
<Text size="lg">Large (18px)</Text>

<Text align="left">Left aligned (default)</Text>
<Text align="center">Center aligned</Text>
<Text align="right">Right aligned</Text>