Components

Text

Display inline text with optional line truncation.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code

'use client';
import { Text } from '@swiftuijs/ui';
export default function Example() {
    return (<Text>Hello, World!</Text>);
}

Text automatically wraps to multiple lines when needed:

Control the maximum number of lines displayed using the lineLimit prop:

Apply custom styles to text:

Wraps within available width; lineLimit truncates positive numbers of lines. Native CSS text styles and React children are supported.
Renders a span, not a heading. Use semantic HTML headings for document hierarchy and avoid nesting block elements inside it.
Ensure contrast and check long text on compact containers.

Long Text

Line Limit

Single Line Limit

Custom Styling

Multiple Texts in VStack

Text in HStack

Prop	Type	Required	Description
`lineLimit`	`number`	No	The maximum number of lines to use for rendering text. If nil, no line limit applies. Default: `undefined (no limit)`

Inherits additional props from IBaseComponent.

TabView

Switch between named content panels.

TextEditor

Edit multiline text in a native textarea.