OpenTUI Components

Reference for all OpenTUI UI components.

Component Naming 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, React uses hyphens.

Text & Display

text

<text fg="#00FF00" bg="#000000">Styled text</text>

// With modifiers
<text>
  <strong>Bold</strong>, <em>italic</em>, <u>underlined</u>
  <span fg="red">Colored</span>
  <br />
  New line
</text>

ascii-font / ascii_font

// React
<ascii-font text="HELLO" />

// Solid
<ascii_font text="HELLO" />

Containers

box

<box
  width={40}
  height={10}
  border={true}
  borderStyle="rounded"
  borderColor="#FFFFFF"
  backgroundColor="#1a1a1a"
  padding={1}
  flexDirection="column"
  gap={1}
>
  <text>Content</text>
</box>

Border styles: "single", "double", "rounded", "heavy"

scrollbox

<scrollbox width={40} height={10} overflow="scroll">
  {longContent}
</scrollbox>

Input Components

input

Single-line text input. Must be focused to receive input.

// React
<input
  value={value}
  onChange={setValue}
  placeholder="Enter text..."
  width={30}
  focused
/>

// Solid
<input
  value={value()}
  onInput={setValue}
  placeholder="Enter text..."
  focused
/>

textarea

Multi-line text input.

<textarea
  value={text}
  onChange={setText}
  width={40}
  height={10}
  showLineNumbers
  wrapText
  focused
/>

select

List selection with navigation.

<select
  options={[
    { name: "Option 1", description: "First option", value: "1" },
    { name: "Option 2", description: "Second option", value: "2" },
  ]}
  onSelect={(index, option) => {
    // Enter key pressed - selection confirmed
    handleSelect(option)
  }}
  onChange={(index, option) => {
    // Arrow keys - navigating
    showPreview(option)
  }}
  height={8}
  focused
/>

Navigation: Up/k, Down/j, Enter

Events:

• onSelect - Enter pressed (confirmed)
• onChange - Arrow keys (browsing)

tab-select / tab_select

Horizontal tab selection.

// React
<tab-select
  options={[
    { name: "Home", description: "Dashboard" },
    { name: "Settings", description: "Config" },
  ]}
  onSelect={(index, option) => setActiveTab(index)}
  tabWidth={20}
  focused
/>

// Solid
<tab_select options={[...]} onSelect={...} focused />

Navigation: Left/[, Right/], Enter

Code & Diff

code

<code language="typescript" value={sourceCode} />

line-number / line_number

// React
<line-number value={sourceCode} startLine={1} />

// Solid
<line_number value={sourceCode} startLine={1} />

diff

<diff
  oldValue={original}
  newValue={modified}
  mode="unified"  // or "split"
/>

Critical Gotchas

Focus Required

// WRONG - won't receive input
<input placeholder="Type here" />

// CORRECT
<input placeholder="Type here" focused />

Options Format

// WRONG
<select options={["a", "b", "c"]} />

// CORRECT
<select options={[{ name: "A" }, { name: "B" }]} />

Text Modifiers

// WRONG - bold prop doesn't exist
<text bold>Bold</text>

// CORRECT - use nested element
<text><strong>Bold</strong></text>

Solid Underscores

// React
<tab-select />
<ascii-font />

// Solid
<tab_select />
<ascii_font />

Detailed Reference

See ${CLAUDE_PLUGIN_ROOT}/skills/opentui-dev/references/components-reference.md for full documentation.