Text

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

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<Text />

Sizes

Extra small text (xs)

Small text (sm)

Default text (base)

Large text (lg)

Extra large text (xl)

2XL text

Colors

Foreground

Muted

Primary

Destructive

Weights

Light weight

Normal weight

Medium weight

Semibold weight

Bold weight

Truncation

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

As Different Elements

Paragraph element (default)

Span element Small element Strong element

Div element

Size — interactive

Pick a size to see it applied live.

The quick brown fox jumps over the lazy dog.

Color — interactive

Pick a color to see it applied live.

The quick brown fox jumps over the lazy dog.

Weight — interactive

Pick a weight to see it applied live.

The quick brown fox jumps over the lazy dog.

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").