opentui

Build interactive terminal user interfaces with OpenTUI using Core, React, or Solid.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/RavitejaKarra24/dotfiles --skill opentui-ravitejakarra24
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: opentui
Source: https://github.com/RavitejaKarra24/dotfiles/tree/main/agents/.agents/skills/opentui
Command: npx skills add https://github.com/RavitejaKarra24/dotfiles --skill opentui-ravitejakarra24

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building interactive terminal UIs requires navigating OpenTUI's three frameworks (Core, React, Solid), its Yoga/Flexbox layout system, keyboard handling, animations, and testing APIs. This Skill consolidates decision trees and reference documentation so you can quickly pick the right framework, components, and patterns without digging through upstream docs. ## Core Features & Use Cases - Framework Selection Guidance: Decision trees route you to Core (imperative), React, or Solid reconcilers based on your needs, with quick-start commands like bunx create-tui -t react my-app. - Component & Concept References: On-demand docs for text display, containers, inputs, code/diff viewers, layout, keyboard input, layered keymaps, timeline animations, and snapshot testing. - Critical Rules & Troubleshooting: Enforces pitfalls like never calling process.exit() directly, using nested text modifiers for styling, and placing create-tui options before arguments. - Use Case: You want to build a CLI dashboard with a scrollable log view, keyboard navigation, and a diff viewer. The Skill points you to the React quick start, components/containers.md for scrollbox, keyboard/REFERENCE.md for shortcuts, and components/code-diff.md for the diff viewer. ## Quick Start Ask the assistant to scaffold a new OpenTUI app with your chosen framework, for example: create a React-based terminal UI project named my-app using create-tui.

Frequently Asked Questions about opentui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new OpenTUI project?

Run `bunx create-tui@latest -t react my-app` (or `-t core` / `-t solid`) to scaffold a project autonomously. Options must come before the directory argument, and the target directory must not already exist.

Should I use OpenTUI Core, React, or Solid for my TUI?

Use Core for maximum control, minimal bundle size, or when building libraries on top of OpenTUI. Choose React if your team knows React patterns, and Solid for fine-grained reactivity and optimal re-rendering performance.

Does OpenTUI run on Node.js or only Bun?

OpenTUI's reference runtime is Bun with Zig for native builds. Node.js 26.3.0 is supported for the native renderer with `--experimental-ffi`, and `@opentui/keymap` imports in Node without any FFI.

How do I test an OpenTUI terminal app?

Use `createTestRenderer` from `@opentui/core/testing` for headless snapshot and interaction tests, or `testRender` from `@opentui/react/test-utils` or `@opentui/solid`. Always call `renderOnce()` before capturing frames and destroy the renderer after each test.

Why does my OpenTUI app crash or fail to clean up the terminal?

A common cause is calling `process.exit()` directly instead of `renderer.destroy()`, which skips terminal cleanup. Check `core/gotchas.md` for runtime errors, terminal restoration, and debugging guidance.

How do I handle keyboard shortcuts in OpenTUI?

Use the `useKeyboard` hook (React/Solid) or `renderer.keyInput` events (Core) for simple shortcuts. For layered bindings, leader keys, sequences like `dd`, and ex-style commands, use the separate `@opentui/keymap` package.