Widgets
Text
Renders a single line of text with optional styling and overflow handling.
Renders a single line of text with optional styling and overflow handling.
Usage
import { ui, rgb } from "@rezi-ui/core";
ui.text("Hello");
ui.text("Title", { fg: rgb(120, 200, 255), bold: true }); // pass a TextStyle
ui.text("Caption", { variant: "caption", textOverflow: "ellipsis" }); // pass TextPropsProps
ui.text(content, styleOrProps?) accepts either a TextStyle or TextProps.
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Optional identity (not focusable) |
key | string | - | Reconciliation key for lists |
style | TextStyle | - | Style applied to this text |
variant | "body" | "heading" | "caption" | "code" | "label" | "body" | Predefined styling intent |
textOverflow | "clip" | "ellipsis" | "middle" | "clip" | How to handle overflow |
maxWidth | number | - | Maximum width (cells) for overflow handling |
Examples
1) Heading + caption
import { ui, rgb } from "@rezi-ui/core";
ui.column({ gap: 1 }, [
ui.text("Rezi", { variant: "heading", style: { fg: rgb(120, 200, 255), bold: true } }),
ui.text("Deterministic terminal UI", { variant: "caption", style: { dim: true } }),
]);2) Ellipsis truncation
import { ui } from "@rezi-ui/core";
ui.box({ width: 20, border: "single", p: 1 }, [
ui.text("This will truncate with ellipsis", { textOverflow: "ellipsis" }),
]);3) Middle truncation
import { ui } from "@rezi-ui/core";
ui.box({ width: 24, border: "single", p: 1 }, [
ui.text("/home/user/documents/project/src/index.ts", { textOverflow: "middle" }),
]);Notes
- Text is not focusable and does not emit events.
- Measurement and truncation are cell-based and deterministic.
maxWidthcaps both measurement (layout) and truncation width.variantapplies a small default style (heading/label: bold, caption: dim, code: inverse) which can be overridden viastyle.