Text

Import

import { Text } from 'tuimorphic';

Usage

The Text component renders semantic HTML with terminal-aesthetic styling for body copy and secondary text.

This is default body text with monospace styling.

<Text>Default body text</Text>

Props

Prop	Type	Default	Description
as	`'p' \| 'span' \| 'div' \| 'strong' \| 'em' \| 'small' \| 'blockquote'`	`'p'`	HTML element to render
variant	`'body' \| 'secondary' \| 'muted' \| 'caption'`	`'body'`	Visual variant
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-	Font size
transform	`'uppercase' \| 'lowercase' \| 'capitalize' \| 'none'`	-	Text transform
align	`'left' \| 'center' \| 'right'`	-	Text alignment
truncate	`boolean`	`false`	Truncate text with ellipsis
mono	`boolean`	`true`	Use monospace font
children	`React.ReactNode`	-	Text content
className	`string`	-	Additional CSS class names

Variants

Visual Variants

Body: Primary text for main content.

Secondary: Supporting text with reduced emphasis.

Muted: Subdued text for tertiary information.

Caption: Small text for labels and annotations.

<Text variant="body">Body text</Text>
<Text variant="secondary">Secondary text</Text>
<Text variant="muted">Muted text</Text>
<Text variant="caption">Caption text</Text>

Sizes

Extra Small (xs)

Small (sm)

Medium (md) - Default

Large (lg)

Extra Large (xl)

<Text size="xs">Extra small text</Text>
<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>

Semantic Elements

Paragraph element (default)

Span element for inline textStrong element for emphasisEm element for italicized textSmall element for fine print

Blockquote element for citations

<Text as="p">Paragraph text</Text>
<Text as="span">Inline span</Text>
<Text as="strong">Strong emphasis</Text>
<Text as="em">Italic emphasis</Text>
<Text as="small">Small text</Text>
<Text as="blockquote">Block quote</Text>

Text Transform

Uppercase text transform

LOWERCASE TEXT TRANSFORM

capitalize each word

<Text transform="uppercase">Uppercase text</Text>
<Text transform="lowercase">LOWERCASE TEXT</Text>
<Text transform="capitalize">capitalized text</Text>

Alignment

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

Truncation

This is a very long piece of text that will be truncated with an ellipsis when it exceeds the container width.

<Text truncate style={{ maxWidth: '200px' }}>
  This is a very long text that will be truncated with an ellipsis
</Text>

Without Monospace

<Text mono={false}>Sans-serif text</Text>

On this page