Text

A flexible typography component for rendering text with predefined sizes, weights, colors, alignment, and semantic elements.

Sizes

Small text

Medium text

Large text

Extra large text

import { Text } from 'uiplex';

<Text size="sm">Small text</Text>
<Text size="md">Medium text</Text>
<Text size="lg">Large text</Text>
<Text size="xl">Extra large text</Text>

Weights

Regular weight

Medium weight

Semibold weight

Bold weight

<Text weight="regular">Regular weight</Text>
<Text weight="medium">Medium weight</Text>
<Text weight="semibold">Semibold weight</Text>
<Text weight="bold">Bold weight</Text>

Colors

Primary color

Secondary color

Muted color

Success color

Warning color

Danger color

<Text variant="primary">Primary</Text>
<Text variant="secondary">Secondary</Text>
<Text variant="muted">Muted</Text>
<Text variant="success">Success</Text>
<Text variant="warning">Warning</Text>
<Text variant="danger">Danger</Text>

Custom Colors

Red text

Blue text

Purple text

Green text

Magenta text

<Text color="red">Red text</Text>
<Text color="blue">Blue text</Text>
<Text color="#8b5cf6">Purple text</Text>
<Text color="rgb(34, 197, 94)">Green text</Text>
<Text color="hsl(280, 100%, 50%)">Magenta text</Text>

Alignment

Left aligned text

Center aligned text

Right aligned text

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

Semantic Elements

Rendered as paragraph (p)

Rendered as spanRendered as strongRendered as emphasis

<Text as="p">Paragraph</Text>
<Text as="span">Span</Text>
<Text as="strong">Strong</Text>
<Text as="em">Emphasis</Text>

Combined Example

Dashboard

Welcome back! Here is a quick summary of your recent activity.

Last updated 5 minutes ago

+12% growth this week

<Text size="xl" weight="bold">Dashboard</Text>
<Text variant="muted">Welcome back! Here is a quick summary...</Text>
<Text size="sm" variant="secondary">Last updated 5 minutes ago</Text>
<Text as="strong" variant="success">+12% growth this week</Text>

API Reference

Prop	Type	Default	Description
as	keyof JSX.IntrinsicElements	"p"	HTML element to render
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Font size preset
weight	"regular" \| "medium" \| "semibold" \| "bold"	"regular"	Font weight preset
variant	"primary" \| "secondary" \| "muted" \| "danger" \| "success" \| "warning"	"primary"	Color variant preset
color	string	-	Custom color value (e.g., 'red', '#dedede', 'rgb(255, 0, 0)')
align	"left" \| "center" \| "right"	"left"	Text alignment
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles
...props	React.HTMLAttributes<HTMLElement>	-	All standard HTML attributes