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 color="primary">Primary</Text>
<Text color="secondary">Secondary</Text>
<Text color="muted">Muted</Text>
<Text color="success">Success</Text>
<Text color="warning">Warning</Text>
<Text color="danger">Danger</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 color="muted">Welcome back! Here is a quick summary...</Text>
<Text size="sm" color="secondary">Last updated 5 minutes ago</Text>
<Text as="strong" color="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
color	"primary" \| "secondary" \| "muted" \| "danger" \| "success" \| "warning"	"primary"	Color preset
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