Components

The tables compare each component’s availability across Core, React, and Solid.

An automatic framework element needs no component-specific registration. Separately registered elements require the package setup shown on their component page. Unavailable means that the shipped API does not expose that surface.

Display and layout#

Text displays labels, prose, and styled text. Choose Code for parsed source or Markdown for documents.
Box lays out children and can draw a background, border, and title. Choose ScrollBox when the children must scroll.

Component	Package	Core renderable	React	Solid	Status
Text	`@opentui/core`	`TextRenderable`	`<text>` (automatic)	`<text>` (automatic)	Built in
Box	`@opentui/core`	`BoxRenderable`	`<box>` (automatic)	`<box>` (automatic)	Built in

Inline text elements#

React and Solid also register , , , , , ,  , and <a>. These elements are built-in text children, not standalone layout components. Use them only inside <text>. The <a> element accepts href and creates terminal hyperlink metadata.

Surface	Package	Core renderable	React	Solid	Status
Inline styling	`@opentui/react`, `@opentui/solid`	`TextNodeRenderable`	`<span>`, `<b>`, `<strong>`, `<i>`, `<em>`, `<u>`	`<span>`, `<b>`, `<strong>`, `<i>`, `<em>`, `<u>`	Built-in framework text nodes
Line break	`@opentui/react`, `@opentui/solid`	`TextNodeRenderable`	`<br>`	`<br>`	Built-in framework text node
Hyperlink	`@opentui/react`, `@opentui/solid`	`TextNodeRenderable`	`<a href>`	`<a href>`	Built-in framework text node

Input and selection#

Input edits one line of text. Choose Textarea for multi-line editing.
Textarea edits multiple lines with cursor and selection support. Choose Input for one line.
Select shows discrete choices in a vertical list. Choose TabSelect for a horizontal strip or Slider for a continuous value.
TabSelect shows peer choices in a horizontal tab strip. Choose Select for a vertical list.
Slider selects a continuous value with a draggable thumb. Choose Select for discrete choices.

Component	Package	Core renderable	React	Solid	Status
Input	`@opentui/core`	`InputRenderable`	`<input>` (automatic)	`<input>` (automatic)	Built in
Textarea	`@opentui/core`	`TextareaRenderable`	`<textarea>` (automatic)	`<textarea>` (automatic)	Built in
Select	`@opentui/core`	`SelectRenderable`	`<select>` (automatic)	`<select>` (automatic)	Built in
TabSelect	`@opentui/core`	`TabSelectRenderable`	`<tab-select>` (automatic)	`<tab_select>` (automatic)	Built in
Slider	`@opentui/core`	`SliderRenderable`	Unavailable	Unavailable	Built-in Core renderable

Scrolling#

ScrollBox owns scrollable children, clipping, and scrollbars. Use it for normal scrolling containers.
ScrollBar controls an external scroll position. Use it when another model owns the scroll state.

Component	Package	Core renderable	React	Solid	Status
ScrollBox	`@opentui/core`	`ScrollBoxRenderable`	`<scrollbox>` (automatic)	`<scrollbox>` (automatic)	Built in
ScrollBar	`@opentui/core`	`ScrollBarRenderable`	Unavailable	Unavailable	Built-in Core renderable

Rich content#

Code displays syntax-highlighted source. Choose Markdown for documents or Diff for patches.
Markdown renders document structure and fenced code. Choose Code when all content is source code.
Line number gutter adds numbers and signs to line-aware content. Diff manages its own gutters.
Diff displays the first file patch in unified or split form. Create one instance for each file patch.
TextTable lays out styled cell data. Choose Markdown when the table starts as Markdown source.

Component	Package	Core renderable	React	Solid	Status
Code	`@opentui/core`	`CodeRenderable`	`<code>` (automatic)	`<code>` (automatic)	Built in
Markdown	`@opentui/core`	`MarkdownRenderable`	`<markdown>` (automatic)	`<markdown>` (automatic)	Built in
Line number gutter	`@opentui/core`	`LineNumberRenderable`	`<line-number>` (automatic)	`<line_number>` is runtime built in. The Solid binding lacks an exact props declaration.	Built in with a Solid typing limitation
Diff	`@opentui/core`	`DiffRenderable`	`<diff>` (automatic)	`<diff>` is runtime built in. The Solid binding lacks an exact props declaration.	Built in with a Solid typing limitation
TextTable	`@opentui/core`	`TextTableRenderable`	Unavailable	Unavailable	Built-in Core renderable

OpenTUI bundles parsers for JavaScript and JSX, TypeScript and TSX, Markdown and Markdown inline, and Zig. Other grammars require Tree-sitter configuration.

Graphics and media#

ASCIIFont draws short text with bundled ASCII art fonts. Choose Text for labels and prose.
FrameBuffer exposes direct cell drawing. Choose Image when you only need to display an image source.
Image displays encoded images or a NativeImage. Use the NativeImage API to decode or transform pixels.
QR code displays text as a scannable symbol. Use the QR encoder for matrices and serialized output.
Embedded terminal parses VT output and draws a child terminal. It does not start a process.

Component	Package	Core renderable	React	Solid	Status
ASCIIFont	`@opentui/core`	`ASCIIFontRenderable`	`<ascii-font>` (automatic)	`<ascii_font>` (automatic)	Built in
FrameBuffer	`@opentui/core`	`FrameBufferRenderable`	Unavailable	Unavailable	Advanced
Image	`@opentui/core`	`ImageRenderable`	`<image>` (automatic)	`<image>` (automatic)	Built in
QR code	`@opentui/qrcode`	`QRCodeRenderable`	Register `@opentui/qrcode/react`, then use `<qr-code>`	Register `@opentui/qrcode/solid`, then use `<qr_code>`	Separately registered
Embedded terminal	`@opentui/core`	`EmbeddedTerminalRenderable`	Unavailable	Unavailable	Built-in Core renderable

Use the Buffer API for low-level OptimizedBuffer ownership and drawing operations.

Diagnostics#

TimeToFirstDraw is a diagnostic, not a general display component. See Rendering diagnostics for its timestamp behavior.