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 <span>, <b>, <strong>, <i>, <em>, <u>, <br>, 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 theNativeImageAPI 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.