Documentation Index
Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
Use this file to discover all available pages before exploring further.
Text
The Text component renders styled text with support for colors, sizes, weights, alignment, and advanced typography controls.
Props
| Prop | Type | Default | Description |
|---|
value | string | - | Text content to display |
children | string | - | Alternative to value |
size | string | number | "md" | Font size: xs, sm, md, lg, xl, 2xl, or number |
weight | string | "regular" | Font weight: regular, medium, semibold, bold |
color | string | "primary" | Text color (see Color Values below) |
align | string | "left" | Text alignment: left, center, right |
italic | boolean | false | Italic text |
underline | boolean | false | Underline text |
strikethrough | boolean | false | Strikethrough text |
lines | number | - | Max lines before truncation with ellipsis |
lineHeight | number | - | Line height (multiplier or absolute value) |
letterSpacing | number | - | Letter spacing in pixels |
transform | string | "none" | Text transform: none, uppercase, lowercase, capitalize |
width | string | number | - | Fixed width |
flex | number | - | Flex grow factor |
Size Presets
"xs" - 11px"sm" - 13px"md" - 15px (default)"lg" - 17px"xl" - 20px"2xl" - 24px
Color Values
- Semantic colors:
primary, secondary, tertiary, muted, default
- Status colors:
action, success, warning, error
- Absolute colors:
white, black
- Alpha transparency:
alpha-XX (e.g., alpha-50 for 50% opacity white)
- Custom colors: Any hex color (e.g.,
#8B5CF6)
Examples
Basic Text
<Text value="Hello, World!" />
Sizes
<Col gap="sm">
<Text value="Extra Small" size="xs" />
<Text value="Small" size="sm" />
<Text value="Medium" size="md" />
<Text value="Large" size="lg" />
<Text value="Extra Large" size="xl" />
<Text value="2X Large" size="2xl" />
</Col>
Weights
<Col gap="sm">
<Text value="Regular weight" weight="regular" />
<Text value="Medium weight" weight="medium" />
<Text value="Semibold weight" weight="semibold" />
<Text value="Bold weight" weight="bold" />
</Col>
Colors
<Col gap="sm">
<Text value="Primary color" color="primary" />
<Text value="Muted color" color="muted" />
<Text value="Success color" color="success" />
<Text value="Error color" color="error" />
<Text value="Custom color" color="#8B5CF6" />
</Col>
Text Decoration
<Col gap="sm">
<Text value="Italic text" italic />
<Text value="Underlined text" underline />
<Text value="Strikethrough text" strikethrough />
<Text value="Combined styles" italic underline />
</Col>
Text Transform
<Col gap="sm">
<Text value="uppercase text" transform="uppercase" />
<Text value="LOWERCASE TEXT" transform="lowercase" />
<Text value="capitalize each word" transform="capitalize" />
</Col>
Line Height and Spacing
<Col gap="md">
{/* Line height as multiplier */}
<Text
value="This is text with 1.5x line height for better readability in paragraphs."
lineHeight={1.5}
/>
{/* Letter spacing */}
<Text
value="SPACED OUT TEXT"
letterSpacing={2}
weight="semibold"
/>
</Col>
Truncation
<Text
value="This is a very long text that will be truncated after two lines with an ellipsis at the end to prevent overflow."
lines={2}
/>
Alignment
<Col gap="sm">
<Text value="Left aligned" align="left" />
<Text value="Center aligned" align="center" />
<Text value="Right aligned" align="right" />
</Col>
Semi-transparent Text
<Box background="primary" padding="md">
<Text value="50% opacity" color="alpha-50" />
<Text value="70% opacity" color="alpha-70" />
</Box>
Common Patterns
Label-Value Pair
<Row gap="sm">
<Text value="Name:" weight="semibold" />
<Text value={userName} flex={1} />
</Row>
Description Text
<Text
value="This is a longer description that provides context about the feature."
color="muted"
size="sm"
lineHeight={1.5}
/>
Price Display
<Row gap="xs" align="baseline">
<Text value="$99" size="xl" weight="bold" />
<Text value=".99" size="md" weight="bold" />
<Text value="/month" size="sm" color="muted" />
</Row>
Status Message
<Row gap="xs" align="center">
<Icon name="check-circle" color="success" size="sm" />
<Text value="Payment successful" color="success" weight="medium" />
</Row>
Error Message
<Text
value="Please enter a valid email address"
color="error"
size="sm"
/>
