▚Text

Display styled text content with support for colors, attributes, and text selection.

~/components/text

live

$ termino text-demo

plain Default foreground

attributes bold dim italic underline inverse strike

ansi 16 red green yellow blue magenta cyan

rgb #7aa2f7 #9ece6a #e0af68 #f7768e #bb9af7 #7dcfff

template t`${bold(fg("#00FFFF")("styled"))}`

selection selectable by default

##Renderable API

tsrenderable

1import { TextRenderable, createCliRenderer } from "@opentui/core"
2
3const renderer = await createCliRenderer()
4
5const title = new TextRenderable(renderer, {
6id: "title",
7content: "Hello, terminal!",
8fg: "#7aa2f7",
9attributes: TextAttributes.BOLD,
10})
11
12renderer.root.add(title)

##Construct API

tsconstruct

1import { Text, createCliRenderer } from "@opentui/core"
2
3const renderer = await createCliRenderer()
4
5renderer.root.add(
6Text({
7  content: "Hello, terminal!",
8  fg: "#7aa2f7",
9}),
10)

##Text attributes

Combine multiple attributes with bitwise OR:

1const bold = Text({ content: "bold", attributes: TextAttributes.BOLD })
2const dim = Text({ content: "dim", attributes: TextAttributes.DIM })
3const combo = Text({
4content: "bold + underline",
5attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
6})

| Attribute | Description | | --- | --- | | TextAttributes.BOLD | Bold text | | TextAttributes.DIM | Dimmed text | | TextAttributes.ITALIC | Italic text | | TextAttributes.UNDERLINE | Underlined text | | TextAttributes.BLINK | Blinking text | | TextAttributes.INVERSE | Inverted colors | | TextAttributes.HIDDEN | Hidden text | | TextAttributes.STRIKETHROUGH | Strikethrough text |

##Template literals for rich text

Use the t` template literal to compose styled text in a single call:

1import { t, bold, fg } from "@opentui/core"
2
3const status = Text({
4content: t`${bold(fg("#00FFFF")("CONNECTED"))} — waiting for input`,
5})

##Properties

properties

prop	type	default	description
content	string \| StyledText	""	The text content to display
fg	string \| RGBA	-	Foreground (text) color
bg	string \| RGBA	-	Background color
attributes	TextAttributes	0	Text styling attributes (bitwise OR)
selectable	boolean	true	Whether text can be selected
position	"relative" \| "absolute"	"relative"	Positioning mode
left / top / right / bottom	number \| "auto" \| "{n}%"	auto	Position offsets