Documentation Index Fetch the complete documentation index at: https://mintlify.com/RtlZeroMemory/Rezi/llms.txt
Use this file to discover all available pages before exploring further.
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