Text

The Text component is one of the core building blocks in Kontra TUI. It's used to display plain or styled text — whether static, styled, or dynamic.

Basic Usage

Create a simple static Text component by passing a string:


  auto static_text = std::make_shared<Text>("This is a static text component.");

This will display the text exactly as provided, with no styling or updates.

Styling with StyleBuilder

You can style your text with color, background, bold, italic, and more:

.set_color(ansi::FG_CYAN) - Sets the foreground (text) color.
.set_background_color(ansi::BG_BRIGHT_BLACK) - Sets the background color.
.set_bold(true) - Makes the text bold.
.set_italic(true) - Makes the text italicized.
.build() - Finalizes the style and returns a TextStyle object.

The StyleBuilder allows for chaining .set_...() methods and then calling .build().

Dynamic Text (Reactive)

You can pass a lambda ([](){}) instead of a string to make the text reactive.

It will re-evaluate every time the UI re-renders, allowing for real-time clocks, counters, etc.

For example, following shows a real time clock!

Layout Example

Here's a layout that combines static, styled, and dynamic Text components:

Wrap the list with a border for a better visual:

Now simply adding it to the screen and rendering it!

Output

TL;DR;

Use Text("...") for static messages.
Use Text(..., TextStyle(...)) or StyleBuilder for styling.
Use Text([](){...}) for dynamic, auto-updating content.
Combine with List, Border, and state variables for beautiful layouts.

Whether you're building headers, feedback messages, or live clocks — Text is the backbone of Kontra's TUI rendering.

Tabs