Text

Render text with typography and truncation options for content, labels, and constrained areas.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Text for text semantics, truncation, expansion, and hints. Hover motion is off by default. Ordinary static text can use semantic HTML; choose a motion component for animated values or text transitions.

tag selects text semantics, lines controls truncation, and more or tooltip provides expansion or a supplemental hint.
Hover interaction is off by default. stateText can replace copy by state, and parts configures generated Button or Tooltip children.
With lines=1, shortened visible text retains its complete accessible name, including when used inside a button, link or native label.

Import

import { Text } from '@snowui-design-system/components';

Usage

Multiple lines

Expand content

Scrollable content

API Reference

Property	Type	Default	Example	Description
`tag`	`string`	`—`	`tag="Example"`	Root HTML tag. Defaults to span.
`stateText`	`StateValueMap<string \| number>`	`—`	`stateText={stateTextOptions}`	Render text for the nearest parent Frame currentState. If the current state has no match, fall back to Idle, then children.
`interactive`	`boolean`	`false`	`interactive`	Enable Text hover motion when explicitly true; off by default.
`lines`	`0 \| 1 \| 2 \| 3`	`—`	`lines={value}`	Truncation mode: 0 allows expansion, while 1, 2, or 3 fixes the visible line count.
`more`	`boolean`	`false`	`more`	Generate an expansion Button when lines=0. The default appearance is the ArrowLineDown Button from example 6.
`tooltip`	`TooltipProp`	`—`	`tooltip={value}`	Tooltip configuration. Supports automatic derivation, fixed text, a Snippet, or an object overriding only placement, offset, and related settings.
`onTruncate`	`(isTruncated: boolean) => void`	`—`	`onTruncate={(value) => { /* handle value */ }}`	Callback when truncation state changes.
`children`	`Snippet<[any]>`	`—`	`<Text>Content</Text>`	Default text or custom content. Receives rendering context with breakpoint; matching stateText replaces it.
`parts`	`ComponentPartsOf<{ Button: typeof Button; Tooltip: typeof Tooltip; }>`	`—`	`parts={partsOptions}`	Configure only the generated Button and Tooltip. Same-named components in explicit children do not inherit these settings.