# Text

Source: https://lumeo.nativ.sh/components/text

# Text

A polymorphic text component with control over size, weight, color, and semantic HTML element.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Text />

Preview Code

Sizes

Extra small text (xs)

Small text (sm)

Default text (base)

Large text (lg)

Extra large text (xl)

2XL text

Preview Code

Colors

Foreground

Muted

Primary

Destructive

Preview Code

Weights

Light weight

Normal weight

Medium weight

Semibold weight

Bold weight

Preview Code

Truncation

This is a very long piece of text that should be truncated when it overflows the container width.

Preview Code

As Different Elements

Paragraph element (default)

Span element Small element **Strong element**

Div element

Preview Code

Size — interactive

Pick a size to see it applied live.

xssmbaselgxl2xl3xl

The quick brown fox jumps over the lazy dog.

Preview Code

Color — interactive

Pick a color to see it applied live.

foregroundmutedprimarydestructive

The quick brown fox jumps over the lazy dog.

Preview Code

Weight — interactive

Pick a weight to see it applied live.

lightnormalmediumsemiboldbold

The quick brown fox jumps over the lazy dog.

## API Reference

### Text

Property

Type

Default

Description

Size

string?

—

Text size. Maps to text-{value} (e.g. "xs", "sm", "lg", "xl", "2xl").

Weight

string?

—

Font weight. Maps to font-{value} (e.g. "light", "normal", "medium", "semibold", "bold").

Color

string?

—

Text color. Supports "muted", "primary", "destructive", "foreground", or any Tailwind color token.

As

string

"p"

HTML element to render. Values: "p", "span", "div", "small", "strong".

Leading

string?

—

Line height. Maps to leading-{value} (e.g. "none", "tight", "relaxed", "loose").

Truncate

bool

false

Truncates overflowing text with an ellipsis.

Align

string?

—

Text alignment. Maps to text-{value} (e.g. "left", "center", "right").