Overview The Text widget is the fundamental building block for displaying text in Rezi. It supports styling, variants, text overflow handling, and wrapping.
Basic Usage import { ui } from '@rezi-ui/core' ; // Simple text ui . text ( 'Hello, world!' ) // Text with style ui . text ( 'Error message' , { fg: { r: 255 , g: 0 , b: 0 }, bold: true }) // Using a variant ui . text ( 'Page Title' , { variant: 'heading' })
Props The text content to display.
Text display variant with predefined styling.
"body" - Regular body text (default)"heading" - Bold heading text"caption" - Dimmed secondary text"code" - Monospace code text"label" - Label text When true, text wraps to multiple lines instead of single-line truncation.
textOverflow
'clip' | 'ellipsis' | 'middle' | 'start'
default: "'clip'"
How to handle text that exceeds available width.
"clip" - Cut off text at boundary"ellipsis" - Add ”…” at end"middle" - Add ”…” in middle (preserves start and end)"start" - Add ”…” at start (preserves end) Maximum width for overflow handling (in terminal cells).
Visual styling options for the text. Show TextStyle Properties
fg - Foreground color (RGB)bg - Background color (RGB)bold - Bold textdim - Dimmed textitalic - Italic textunderline - Underlined textstrikethrough - Strikethrough textinverse - Swap foreground and backgroundoverline - Overlined textblink - Blinking textunderlineStyle - Underline style variantunderlineColor - Custom underline color Optional unique identifier for the widget.
Optional reconciliation key for lists.
Text Variants Rezi provides predefined text variants for common use cases:
// Heading - bold, primary emphasis ui . text ( 'Section Title' , { variant: 'heading' }) // Caption - dimmed, secondary text ui . text ( 'Last updated: 2 hours ago' , { variant: 'caption' }) // Code - monospace font ui . text ( 'npm install @rezi-ui/core' , { variant: 'code' }) // Label - for form labels and UI text ui . text ( 'Username:' , { variant: 'label' })
Text Wrapping By default, text renders on a single line. Enable wrapping for multi-line text:
ui . text ( 'This is a long paragraph that will wrap across multiple lines when the wrap property is enabled.' , { wrap: true } )
Text wrapping uses grapheme-safe hard breaks and is newline-aware.
Overflow Handling Control how text behaves when it exceeds available width:
const longFilename = '/home/user/documents/project/very-long-filename.txt' ; // Clip at boundary ui . text ( longFilename , { textOverflow: 'clip' , maxWidth: 30 }) // Output: "/home/user/documents/project/" // Ellipsis at end ui . text ( longFilename , { textOverflow: 'ellipsis' , maxWidth: 30 }) // Output: "/home/user/documents/proj..." // Ellipsis in middle (preserves both ends) ui . text ( longFilename , { textOverflow: 'middle' , maxWidth: 30 }) // Output: "/home/user/...filename.txt" // Ellipsis at start (preserves end) ui . text ( longFilename , { textOverflow: 'start' , maxWidth: 30 }) // Output: ".../very-long-filename.txt"
Styling Examples Colors import { rgb } from '@rezi-ui/core' ; // RGB colors ui . text ( 'Success' , { fg: rgb ( 0 , 255 , 0 ) }) ui . text ( 'Warning' , { fg: rgb ( 255 , 165 , 0 ), bg: rgb ( 50 , 50 , 50 ) }) // Inline RGB ui . text ( 'Error' , { fg: { r: 255 , g: 0 , b: 0 } })
Text Attributes // Bold and italic ui . text ( 'Important!' , { bold: true , italic: true }) // Underlined with custom style ui . text ( 'Link' , { underline: true , underlineStyle: 'curly' , underlineColor: { r: 0 , g: 150 , b: 255 } }) // Dimmed caption text ui . text ( 'Optional field' , { dim: true }) // Inverse colors ui . text ( 'Highlighted' , { inverse: true })
Common Patterns Error Messages ui . text ( '✗ Build failed' , { fg: { r: 255 , g: 0 , b: 0 }, bold: true })
Status Indicators ui . column ({ gap: 0 }, [ ui . text ( '● Running' , { fg: { r: 0 , g: 255 , b: 0 } }), ui . text ( '● Stopped' , { fg: { r: 128 , g: 128 , b: 128 } }), ui . text ( '● Failed' , { fg: { r: 255 , g: 0 , b: 0 } }) ])
Multi-line Content ui . text ( 'This is a longer description that spans multiple lines. ' + 'It will wrap naturally based on the available width.' , { wrap: true , maxWidth: 50 } )
RichText - Multiple styled spans in one widgetBadge - Compact status labelsCallout - Highlighted messages