Skip to main content
OpenTUI provides a comprehensive set of components for building rich terminal user interfaces. All components are fully typed and support reactive updates.

​
Layout Components

Box

Fundamental container with borders, backgrounds, and flexbox layout

ScrollBox

Scrollable container with vertical and horizontal scrollbars

ScrollBar

Standalone scrollbar component for custom scroll implementations

​
Text & Content

Text

Display styled text with color, attributes, and wrapping

Markdown

Render markdown with syntax highlighting and custom styles

Code

Syntax-highlighted code display with Tree-sitter integration

ASCIIFont

Render text using ASCII art fonts for headings and titles

​
Input & Forms

Input

Single-line text input with validation and events

Textarea

Multi-line text editor with undo/redo and keybindings

Select

Vertical selection list with keyboard navigation

TabSelect

Horizontal tab selector for switching between views

Slider

Interactive slider for numeric value selection

​
Data Display

TextTable

Flexible table with wrapping, borders, and column sizing

Diff

Side-by-side or unified diff viewer with syntax highlighting

​
Utilities

ScrollBar

Scroll indicators for scrollable content

LineNumbers

Add line numbers, signs, and gutter colors to text components

FrameBuffer

Offscreen rendering buffer for optimized drawing

​
Component Features

All OpenTUI components share common features:
  • Flexbox Layout: Full Yoga layout engine support with flex properties
  • Reactive Updates: Automatic re-rendering when properties change
  • Event Handling: Mouse and keyboard event support
  • Selection: Built-in text selection for most components
  • Styling: Color, background, borders, and text attributes
  • Accessibility: Keyboard navigation and focus management

​
Getting Started

Import components from @opentui/core: 
import { Box, Text, Input, Select } from '@opentui/core'

function App() {
  return (
    <Box border borderStyle="rounded" padding={1}>
      <Text>Welcome to OpenTUI</Text>
      <Input placeholder="Type something..." />
    </Box>
  )
}

​
Component Categories

​
Layout Components

Layout components provide structure and organization for your UI. Use Box for general containers, ScrollBox when content exceeds viewport size.

​
Text & Content

Text components handle rich content display with styling, markdown rendering, and syntax highlighting capabilities.

​
Input & Forms

Input components enable user interaction through text entry, selection, and value adjustment.

​
Data Display

Data display components present structured information like tables and code comparisons in readable formats.

​
Utilities

Utility components enhance other components with features like line numbers or provide low-level rendering capabilities.

​
Next Steps

Renderable API

Explore common props shared across components

Styling Guide

Learn how to style components with colors and attributes

Layout System

Understand the flexbox-based layout system

Event Handling

Handle user interactions with mouse and keyboard

Build docs developers (and LLMs) love

Get started for freeTalk to us