Components / Basics
Text
Headings, body text, labels, links and inline code, with wrapping that avoids a lone last word.
Functions: cui_code, cui_label, cui_muted, cui_text
Usage
cui_heading(ui, "Settings", 1); /* 1..4: 36, 28, 22, 17 pt; Geist for 28 and up */
cui_text(ui, "Body text wraps to the available width.");
cui_secondary(ui, "Supporting text in the secondary color.");
cui_muted(ui, "Small, muted text.");
cui_label(ui, "Medium weight label");
cui_textf(ui, "%d unread", unread);
cui_code(ui, "cui_button()");
if (cui_link(ui, "Read the docs")) open_docs();
cui_icon(ui, CUI_ICON_ZAP, 16, CUI_COLOR_ACCENT);cui_text options: font (CUI_FONT_BODY, MEDIUM, DISPLAY, MONO), size, color, align, nowrap (one line with an ellipsis), tabular (aligned digits), width, line_height.
Wrapped text breaks like a careful typesetter: when a paragraph would end on a single word under a full line, the lines are rebalanced so at least two words share the last line. The number of lines never changes, so layout does not move. A nowrap line that is cut short with an ellipsis shows its whole text in a tooltip when the pointer rests on it; the text stays non-interactive, so the row or card around it keeps its clicks.
Hierarchy comes from size and color, not weight: CUI uses regular and medium only.
Keyboard
- Text takes no focus. A link takes Tab, and Enter or Space follows it.
Options of cui_text
| Option | Type | Default | Description |
|---|---|---|---|
.font | cui_font | CUI_FONT_BODY (0) | default CUI_FONT_BODY (0) |
.size | float | theme text_body | default theme text_body |
.color | cui_color | foreground | default foreground |
.align | cui_text_align | One of CUI_TEXT_START, CUI_TEXT_CENTER, CUI_TEXT_RIGHT, CUI_TEXT_LEFT or CUI_TEXT_END. | |
.nowrap | bool | single line, ellipsis when it does not fit | |
.tabular | bool | tabular numbers | |
.selectable | bool | reserved | |
.width | cui_size | Width: CUI_FILL, CUI_FIT, CUI_PX(n) or CUI_PCT(n); unset uses the component's own. | |
.line_height | float | 1.45 | multiplier, default 1.45 |
.direction | cui_direction | inherited; AUTO examines this text |
Related
- Button: Starts an action when clicked. It comes in six variants and three sizes, with an optional icon and a loading state.
- Icons: The Lucide icon set embedded as a font, used by name through CUI_ICON_* constants.
- Badge, avatar and keycap: Small labels: a badge for a status or a count, an avatar for a person, and a keycap for a keyboard key.
- Card and metric: A card is a surface that groups content. A metric shows one number with its change and an optional sparkline.