OpenTUI Components

Reference for all OpenTUI components, organized by category. Components are available in all three frameworks (Core, React, Solid) with slight API differences.

When to Use

Use this reference when you need to find the right component category or compare naming across Core, React, and Solid.

Component Categories

Category	Components	File
Text & Display	text, ascii-font, styled text	text-display.md
Containers	box, scrollbox, borders	containers.md
Inputs	input, textarea, select, tab-select	inputs.md
Code & Diff	code, line-number, diff	code-diff.md

Component Chooser

Need a component?
├─ Styled text or ASCII art -> text-display.md
├─ Containers, borders, scrolling -> containers.md
├─ Forms or input controls -> inputs.md
└─ Code blocks, diffs, line numbers -> code-diff.md

Component Naming

Components have different names across frameworks:

Concept	Core (Class)	React (JSX)	Solid (JSX)
Text	`TextRenderable`	`<text>`	`<text>`
Box	`BoxRenderable`	`<box>`	`<box>`
ScrollBox	`ScrollBoxRenderable`	`<scrollbox>`	`<scrollbox>`
Input	`InputRenderable`	`<input>`	`<input>`
Textarea	`TextareaRenderable`	`<textarea>`	`<textarea>`
Select	`SelectRenderable`	`<select>`	`<select>`
Tab Select	`TabSelectRenderable`	`<tab-select>`	`<tab_select>`
ASCII Font	`ASCIIFontRenderable`	`<ascii-font>`	`<ascii_font>`
Code	`CodeRenderable`	`<code>`	`<code>`
Line Number	`LineNumberRenderable`	`<line-number>`	`<line_number>`
Diff	`DiffRenderable`	`<diff>`	`<diff>`

Note: Solid uses underscores (tab_select) while React uses hyphens (tab-select).

Common Properties

All components share these layout properties (see Layout):

// Positioning
position="relative" | "absolute"
left, top, right, bottom

// Dimensions
width, height
minWidth, maxWidth, minHeight, maxHeight

// Flexbox
flexDirection, flexGrow, flexShrink, flexBasis
justifyContent, alignItems, alignSelf
flexWrap, gap

// Spacing
padding, paddingTop, paddingRight, paddingBottom, paddingLeft
margin, marginTop, marginRight, marginBottom, marginLeft

// Display
display="flex" | "none"
overflow="visible" | "hidden" | "scroll"
zIndex

Quick Examples

Core (Imperative)

import { createCliRenderer, TextRenderable, BoxRenderable } from "@opentui/core"

const renderer = await createCliRenderer()

const box = new BoxRenderable(renderer, {
  id: "container",
  border: true,
  padding: 2,
})

const text = new TextRenderable(renderer, {
  id: "greeting",
  content: "Hello!",
  fg: "#00FF00",
})

box.add(text)
renderer.root.add(box)

React

import { createCliRenderer } from "@opentui/core"
import { createRoot } from "@opentui/react"

function App() {
  return (
    <box border padding={2}>
      <text fg="#00FF00">Hello!</text>
    </box>
  )
}

const renderer = await createCliRenderer()
createRoot(renderer).render(<App />)

Solid

import { render } from "@opentui/solid"

function App() {
  return (
    <box border padding={2}>
      <text fg="#00FF00">Hello!</text>
    </box>
  )
}

render(() => <App />)

3.6 KiB Raw Blame History