@opentui/react

A React renderer for building terminal user interfaces using OpenTUI core. Create rich, interactive console applications with familiar React patterns and components.

Installation

Quick start with bun and create-tui:

``bash
bun create tui --template react
`

Manual installation:

`bash
bun install @opentui/react @opentui/core react
`

Quick Start

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

function App() {
return Hello, world!
}

const renderer = await createCliRenderer()
createRoot(renderer).render()
`

TypeScript Configuration

For optimal TypeScript support, configure your tsconfig.json:

`json
{
"compilerOptions": {
"lib": ["ESNext", "DOM"],
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "bundler",
"jsx": "react-jsx",
"jsxImportSource": "@opentui/react",
"strict": true,
"skipLibCheck": true
}
}
`

Table of Contents

- Core Concepts
- Components
- Styling
- API Reference
- createRoot(renderer)
- render(element, config?)
- Hooks
- useRenderer()
- useKeyboard(handler, options?)
- useOnResize(callback)
- useTerminalDimensions()
- useTimeline(options?)
- Components
- Layout & Display Components
- Text Component
- Box Component
- Scrollbox Component
- ASCII Font Component
- Input Components
- Input Component
- Textarea Component
- Select Component
- Code & Diff Components
- Code Component
- Line Number Component
- Diff Component
- Examples
- Login Form
- Counter with Timer
- System Monitor Animation
- Styled Text Showcase
- Component Extension
- Using React DevTools

Core Concepts

$3

OpenTUI React provides several built-in components that map to OpenTUI core renderables:

Layout & Display:

- - Display text with styling
- - Container with borders and layout
- - A scrollable box
- - Display ASCII art text with different font styles

Input Components:

- - Text input field
- <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> - Multi-line text input field<br />- <strong></code><select><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> - Selection dropdown<br />- <strong></code><tab-select><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> - Tab-based selection</p><p class="my-3"><strong>Code & Diff Components:</strong></p><p class="my-3">- <strong></code><code><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> - Code block with syntax highlighting<br />- <strong></code><line-number><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> - Code display with line numbers, diff highlights, and diagnostics<br />- <strong></code><diff><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> - Unified or split diff viewer with syntax highlighting</p><p class="my-3"><strong>Helpers:</strong></p><p class="my-3">- <strong></code><span><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><strong><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><em><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><u><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><b><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><i><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code><br><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></strong> - Text modifiers (_must be used inside of the text component_)</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Components can be styled using props or the </code>style<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />// Direct props<br /><box backgroundColor="blue" padding={2}><br /> <text>Hello, world!</text><br /></box></p><p class="my-3">// Style prop<br /><box style={{ backgroundColor: "blue", padding: 2 }}><br /> <text>Hello, world!</text><br /></box><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">API Reference</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Creates a root for rendering a React tree with the given CLI renderer.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { createCliRenderer } from "@opentui/core"<br />import { createRoot } from "@opentui/react"</p><p class="my-3">const renderer = await createCliRenderer({<br /> // Optional renderer configuration<br /> exitOnCtrlC: false,<br />})<br />createRoot(renderer).render(<App />)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>renderer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: A </code>CliRenderer<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance (typically created with </code>createCliRenderer()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3"><strong>Returns:</strong> An object with a </code>render<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> method that accepts a React element.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">> <strong>Deprecated:</strong> Use </code>createRoot(renderer).render(node)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instead.</p><p class="my-3">Renders a React element to the terminal. This function is deprecated in favor of </code>createRoot<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### </code>useRenderer()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Access the OpenTUI renderer instance.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useRenderer } from "@opentui/react"</p><p class="my-3">function App() {<br /> const renderer = useRenderer()</p><p class="my-3"> useEffect(() => {<br /> renderer.console.show()<br /> console.log("Hello, from the console!")<br /> }, [])</p><p class="my-3"> return <box /><br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### </code>useKeyboard(handler, options?)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Handle keyboard events.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useKeyboard } from "@opentui/react"</p><p class="my-3">function App() {<br /> useKeyboard((key) => {<br /> if (key.name === "escape") {<br /> process.exit(0)<br /> }<br /> })</p><p class="my-3"> return <text>Press ESC to exit</text><br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>handler<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Callback function that receives a </code>KeyEvent<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object<br />- </code>options?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Optional configuration object:<br /> - </code>release?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Boolean to include key release events (default: </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)</p><p class="my-3">By default, only receives press events (including key repeats with </code>repeated: true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). Set </code>options.release<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to also receive release events.</p><p class="my-3"><strong>Example with release events:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useKeyboard } from "@opentui/react"<br />import { useState } from "react"</p><p class="my-3">function App() {<br /> const [pressedKeys, setPressedKeys] = useState<Set<string>>(new Set())</p><p class="my-3"> useKeyboard(<br /> (event) => {<br /> setPressedKeys((keys) => {<br /> const newKeys = new Set(keys)<br /> if (event.eventType === "release") {<br /> newKeys.delete(event.name)<br /> } else {<br /> newKeys.add(event.name)<br /> }<br /> return newKeys<br /> })<br /> },<br /> { release: true },<br /> )</p><p class="my-3"> return (<br /> <box><br /> <text>Currently pressed: {Array.from(pressedKeys).join(", ") || "none"}</text><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### </code>useOnResize(callback)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Handle terminal resize events.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useOnResize, useRenderer } from "@opentui/react"<br />import { useEffect } from "react"</p><p class="my-3">function App() {<br /> const renderer = useRenderer()</p><p class="my-3"> useEffect(() => {<br /> renderer.console.show()<br /> }, [renderer])</p><p class="my-3"> useOnResize((width, height) => {<br /> console.log(</code>Terminal resized to ${width}x${height}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br /> })</p><p class="my-3"> return <text>Resize-aware component</text><br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### </code>useTerminalDimensions()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Get current terminal dimensions and automatically update when the terminal is resized.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useTerminalDimensions } from "@opentui/react"</p><p class="my-3">function App() {<br /> const { width, height } = useTerminalDimensions()</p><p class="my-3"> return (<br /> <box><br /> <text><br /> Terminal dimensions: {width}x{height}<br /> </text><br /> <box style={{ width: Math.floor(width / 2), height: Math.floor(height / 3) }}><br /> <text>Half-width, third-height box</text><br /> </box><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Returns:</strong> An object with </code>width<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>height<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> properties representing the current terminal dimensions.</p><p class="my-3">#### </code>useTimeline(options?)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Create and manage animations using OpenTUI's timeline system. This hook automatically registers and unregisters the timeline with the animation engine.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useTimeline } from "@opentui/react"<br />import { useEffect, useState } from "react"</p><p class="my-3">function App() {<br /> const [width, setWidth] = useState(0)</p><p class="my-3"> const timeline = useTimeline({<br /> duration: 2000,<br /> loop: false,<br /> })</p><p class="my-3"> useEffect(() => {<br /> timeline.add(<br /> {<br /> width,<br /> },<br /> {<br /> width: 50,<br /> duration: 2000,<br /> ease: "linear",<br /> onUpdate: (animation) => {<br /> setWidth(animation.targets[0].width)<br /> },<br /> },<br /> )<br /> }, [])</p><p class="my-3"> return <box style={{ width, backgroundColor: "#6a5acd" }} /><br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Parameters:</strong></p><p class="my-3">- </code>options?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Optional </code>TimelineOptions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> object with properties:<br /> - </code>duration?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Animation duration in milliseconds (default: 1000)<br /> - </code>loop?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Whether the timeline should loop (default: false)<br /> - </code>autoplay?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Whether to automatically start the timeline (default: true)<br /> - </code>onComplete?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Callback when timeline completes<br /> - </code>onPause?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Callback when timeline is paused</p><p class="my-3"><strong>Returns:</strong> A </code>Timeline<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> instance with methods:</p><p class="my-3">- </code>add(target, properties, startTime)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Add animation to timeline<br />- </code>play()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Start the timeline<br />- </code>pause()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Pause the timeline<br />- </code>restart()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">: Restart the timeline from beginning</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Components</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Text Component</p><p class="my-3">Display text with rich formatting.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />function App() {<br /> return (<br /> <box><br /> {/<em> Simple text </em>/}<br /> <text>Hello World</text></p><p class="my-3"> {/<em> Rich text with children </em>/}<br /> <text><br /> <span fg="red">Red Text</span><br /> </text></p><p class="my-3"> {/<em> Text modifiers </em>/}<br /> <text><br /> <strong>Bold</strong>, <em>Italic</em>, and <u>Underlined</u><br /> </text><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Box Component</p><p class="my-3">Container with borders and layout capabilities.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />function App() {<br /> return (<br /> <box flexDirection="column"><br /> {/<em> Basic box </em>/}<br /> <box border><br /> <text>Simple box</text><br /> </box></p><p class="my-3"> {/<em> Box with title and styling </em>/}<br /> <box title="Settings" border borderStyle="double" padding={2} backgroundColor="blue"><br /> <text>Box content</text><br /> </box></p><p class="my-3"> {/<em> Styled box </em>/}<br /> <box<br /> style={{<br /> border: true,<br /> width: 40,<br /> height: 10,<br /> margin: 1,<br /> alignItems: "center",<br /> justifyContent: "center",<br /> }}<br /> ><br /> <text>Centered content</text><br /> </box><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Scrollbox Component</p><p class="my-3">A scrollable box.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />function App() {<br /> return (<br /> <scrollbox<br /> style={{<br /> rootOptions: {<br /> backgroundColor: "#24283b",<br /> },<br /> wrapperOptions: {<br /> backgroundColor: "#1f2335",<br /> },<br /> viewportOptions: {<br /> backgroundColor: "#1a1b26",<br /> },<br /> contentOptions: {<br /> backgroundColor: "#16161e",<br /> },<br /> scrollbarOptions: {<br /> showArrows: true,<br /> trackOptions: {<br /> foregroundColor: "#7aa2f7",<br /> backgroundColor: "#414868",<br /> },<br /> },<br /> }}<br /> focused<br /> ><br /> {Array.from({ length: 1000 }).map((_, i) => (<br /> <box<br /> key={i}<br /> style={{ width: "100%", padding: 1, marginBottom: 1, backgroundColor: i % 2 === 0 ? "#292e42" : "#2f3449" }}<br /> ><br /> <text content={</code>Box ${i}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">} /><br /> </box><br /> ))}<br /> </scrollbox><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### ASCII Font Component</p><p class="my-3">Display ASCII art text with different font styles.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useState } from "react"</p><p class="my-3">function App() {<br /> const text = "ASCII"<br /> const [font, setFont] = useState<"block" | "shade" | "slick" | "tiny">("tiny")</p><p class="my-3"> return (<br /> <box style={{ border: true, paddingLeft: 1, paddingRight: 1 }}><br /> <box<br /> style={{<br /> height: 8,<br /> border: true,<br /> marginBottom: 1,<br /> }}<br /> ><br /> <select<br /> focused<br /> onChange={(_, option) => setFont(option?.value)}<br /> showScrollIndicator<br /> options={[<br /> {<br /> name: "Tiny",<br /> description: "Tiny font",<br /> value: "tiny",<br /> },<br /> {<br /> name: "Block",<br /> description: "Block font",<br /> value: "block",<br /> },<br /> {<br /> name: "Slick",<br /> description: "Slick font",<br /> value: "slick",<br /> },<br /> {<br /> name: "Shade",<br /> description: "Shade font",<br /> value: "shade",<br /> },<br /> ]}<br /> style={{ flexGrow: 1 }}<br /> /><br /> </box></p><p class="my-3"> <ascii-font text={text} font={font} /><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Input Component</p><p class="my-3">Text input field with event handling.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useState } from "react"</p><p class="my-3">function App() {<br /> const [value, setValue] = useState("")</p><p class="my-3"> return (<br /> <box title="Enter your name" style={{ border: true, height: 3 }}><br /> <input<br /> placeholder="Type here..."<br /> focused<br /> onInput={setValue}<br /> onSubmit={(value) => console.log("Submitted:", value)}<br /> /><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Textarea Component</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import type { TextareaRenderable } from "@opentui/core"<br />import { useKeyboard, useRenderer } from "@opentui/react"<br />import { useEffect, useRef } from "react"</p><p class="my-3">function App() {<br /> const renderer = useRenderer()<br /> const textareaRef = useRef<TextareaRenderable>(null)</p><p class="my-3"> useEffect(() => {<br /> renderer.console.show()<br /> }, [renderer])</p><p class="my-3"> useKeyboard((key) => {<br /> if (key.name === "return") {<br /> console.log(textareaRef.current?.plainText)<br /> }<br /> })</p><p class="my-3"> return (<br /> <box title="Interactive Editor" style={{ border: true, flexGrow: 1 }}><br /> <textarea ref={textareaRef} placeholder="Type here..." focused /><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Select Component</p><p class="my-3">Dropdown selection component.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import type { SelectOption } from "@opentui/core"<br />import { useState } from "react"</p><p class="my-3">function App() {<br /> const [selectedIndex, setSelectedIndex] = useState(0)</p><p class="my-3"> const options: SelectOption[] = [<br /> { name: "Option 1", description: "Option 1 description", value: "opt1" },<br /> { name: "Option 2", description: "Option 2 description", value: "opt2" },<br /> { name: "Option 3", description: "Option 3 description", value: "opt3" },<br /> ]</p><p class="my-3"> return (<br /> <box style={{ border: true, height: 24 }}><br /> <select<br /> style={{ height: 22 }}<br /> options={options}<br /> focused={true}<br /> onChange={(index, option) => {<br /> setSelectedIndex(index)<br /> console.log("Selected:", option)<br /> }}<br /> /><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Code Component</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { RGBA, SyntaxStyle } from "@opentui/core"</p><p class="my-3">const syntaxStyle = SyntaxStyle.fromStyles({<br /> keyword: { fg: RGBA.fromHex("#ff6b6b"), bold: true }, // red, bold<br /> string: { fg: RGBA.fromHex("#51cf66") }, // green<br /> comment: { fg: RGBA.fromHex("#868e96"), italic: true }, // gray, italic<br /> number: { fg: RGBA.fromHex("#ffd43b") }, // yellow<br /> default: { fg: RGBA.fromHex("#ffffff") }, // white<br />})</p><p class="my-3">const codeExample = </code>function hello() {<br /> // This is a comment</p><p class="my-3"> const message = "Hello, world!"<br /> const count = 42</p><p class="my-3"> return message + " " + count<br />}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">function App() {<br /> return (<br /> <box style={{ border: true, flexGrow: 1 }}><br /> <code content={codeExample} filetype="javascript" syntaxStyle={syntaxStyle} /><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Line Number Component</p><p class="my-3">Display code with line numbers, and optionally add diff highlights or diagnostic indicators.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import type { LineNumberRenderable } from "@opentui/core"<br />import { RGBA, SyntaxStyle } from "@opentui/core"<br />import { useEffect, useRef } from "react"</p><p class="my-3">function App() {<br /> const lineNumberRef = useRef<LineNumberRenderable>(null)</p><p class="my-3"> const syntaxStyle = SyntaxStyle.fromStyles({<br /> keyword: { fg: RGBA.fromHex("#C792EA") },<br /> string: { fg: RGBA.fromHex("#C3E88D") },<br /> number: { fg: RGBA.fromHex("#F78C6C") },<br /> default: { fg: RGBA.fromHex("#A6ACCD") },<br /> })</p><p class="my-3"> const codeContent = </code>function fibonacci(n: number): number {<br /> if (n <= 1) return n<br /> return fibonacci(n - 1) + fibonacci(n - 2)<br />}</p><p class="my-3">console.log(fibonacci(10))<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"> useEffect(() => {<br /> // Add diff highlight - line was added<br /> lineNumberRef.current?.setLineColor(1, "#1a4d1a")<br /> lineNumberRef.current?.setLineSign(1, { after: " +", afterColor: "#22c55e" })</p><p class="my-3"> // Add diagnostic indicator<br /> lineNumberRef.current?.setLineSign(4, { before: "⚠️", beforeColor: "#f59e0b" })<br /> }, [])</p><p class="my-3"> return (<br /> <box style={{ border: true, flexGrow: 1 }}><br /> <line-number<br /> ref={lineNumberRef}<br /> fg="#6b7280"<br /> bg="#161b22"<br /> minWidth={3}<br /> paddingRight={1}<br /> showLineNumbers={true}<br /> width="100%"<br /> height="100%"<br /> ><br /> <code content={codeContent} filetype="typescript" syntaxStyle={syntaxStyle} width="100%" height="100%" /><br /> </line-number><br /> </box><br /> )<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">For a more complete example with interactive diff highlights and diagnostics, see <a href="examples/line-number.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>examples/line-number.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>.</p><p class="my-3">#### Diff Component</p><p class="my-3">Display unified or split-view diffs with syntax highlighting, customizable themes, and line number support. Supports multiple view modes (unified/split), word wrapping, and theme customization.</p><p class="my-3">For a complete interactive example with theme switching and keybindings, see <a href="examples/diff.tsx" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"></code>examples/diff.tsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></a>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Examples</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { createCliRenderer } from "@opentui/core"<br />import { createRoot, useKeyboard } from "@opentui/react"<br />import { useCallback, useState } from "react"</p><p class="my-3">function App() {<br /> const [username, setUsername] = useState("")<br /> const [password, setPassword] = useState("")<br /> const [focused, setFocused] = useState<"username" | "password">("username")<br /> const [status, setStatus] = useState("idle")</p><p class="my-3"> useKeyboard((key) => {<br /> if (key.name === "tab") {<br /> setFocused((prev) => (prev === "username" ? "password" : "username"))<br /> }<br /> })</p><p class="my-3"> const handleSubmit = useCallback(() => {<br /> if (username === "admin" && password === "secret") {<br /> setStatus("success")<br /> } else {<br /> setStatus("error")<br /> }<br /> }, [username, password])</p><p class="my-3"> return (<br /> <box style={{ border: true, padding: 2, flexDirection: "column", gap: 1 }}><br /> <text fg="#FFFF00">Login Form</text></p><p class="my-3"> <box title="Username" style={{ border: true, width: 40, height: 3 }}><br /> <input<br /> placeholder="Enter username..."<br /> onInput={setUsername}<br /> onSubmit={handleSubmit}<br /> focused={focused === "username"}<br /> /><br /> </box></p><p class="my-3"> <box title="Password" style={{ border: true, width: 40, height: 3 }}><br /> <input<br /> placeholder="Enter password..."<br /> onInput={setPassword}<br /> onSubmit={handleSubmit}<br /> focused={focused === "password"}<br /> /><br /> </box></p><p class="my-3"> <text<br /> style={{<br /> fg: status === "success" ? "green" : status === "error" ? "red" : "#999",<br /> }}<br /> ><br /> {status.toUpperCase()}<br /> </text><br /> </box><br /> )<br />}</p><p class="my-3">const renderer = await createCliRenderer()<br />createRoot(renderer).render(<App />)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { createCliRenderer } from "@opentui/core"<br />import { createRoot } from "@opentui/react"<br />import { useEffect, useState } from "react"</p><p class="my-3">function App() {<br /> const [count, setCount] = useState(0)</p><p class="my-3"> useEffect(() => {<br /> const interval = setInterval(() => {<br /> setCount((prev) => prev + 1)<br /> }, 1000)</p><p class="my-3"> return () => clearInterval(interval)<br /> }, [])</p><p class="my-3"> return (<br /> <box title="Counter" style={{ padding: 2 }}><br /> <text fg="#00FF00">{</code>Count: ${count}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">}</text><br /> </box><br /> )<br />}</p><p class="my-3">const renderer = await createCliRenderer()<br />createRoot(renderer).render(<App />)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { createCliRenderer, TextAttributes } from "@opentui/core"<br />import { createRoot, useTimeline } from "@opentui/react"<br />import { useEffect, useState } from "react"</p><p class="my-3">type Stats = {<br /> cpu: number<br /> memory: number<br /> network: number<br /> disk: number<br />}</p><p class="my-3">export const App = () => {<br /> const [stats, setAnimatedStats] = useState<Stats>({<br /> cpu: 0,<br /> memory: 0,<br /> network: 0,<br /> disk: 0,<br /> })</p><p class="my-3"> const timeline = useTimeline({<br /> duration: 3000,<br /> loop: false,<br /> })</p><p class="my-3"> useEffect(() => {<br /> timeline.add(<br /> stats,<br /> {<br /> cpu: 85,<br /> memory: 70,<br /> network: 95,<br /> disk: 60,<br /> duration: 3000,<br /> ease: "linear",<br /> onUpdate: (values) => {<br /> setAnimatedStats({ ...values.targets[0] })<br /> },<br /> },<br /> 0,<br /> )<br /> }, [])</p><p class="my-3"> const statsMap = [<br /> { name: "CPU", key: "cpu", color: "#6a5acd" },<br /> { name: "Memory", key: "memory", color: "#4682b4" },<br /> { name: "Network", key: "network", color: "#20b2aa" },<br /> { name: "Disk", key: "disk", color: "#daa520" },<br /> ]</p><p class="my-3"> return (<br /> <box<br /> title="System Monitor"<br /> style={{<br /> margin: 1,<br /> padding: 1,<br /> border: true,<br /> marginLeft: 2,<br /> marginRight: 2,<br /> borderStyle: "single",<br /> borderColor: "#4a4a4a",<br /> }}<br /> ><br /> {statsMap.map((stat) => (<br /> <box key={stat.key}><br /> <box flexDirection="row" justifyContent="space-between"><br /> <text>{stat.name}</text><br /> <text attributes={TextAttributes.DIM}>{Math.round(stats[stat.key as keyof Stats])}%</text><br /> </box><br /> <box style={{ backgroundColor: "#333333" }}><br /> <box style={{ width: </code>${stats[stat.key as keyof Stats]}%<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, height: 1, backgroundColor: stat.color }} /><br /> </box><br /> </box><br /> ))}<br /> </box><br /> )<br />}</p><p class="my-3">const renderer = await createCliRenderer()<br />createRoot(renderer).render(<App />)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { createCliRenderer } from "@opentui/core"<br />import { createRoot } from "@opentui/react"</p><p class="my-3">function App() {<br /> return (<br /> <><br /> <text>Simple text</text><br /> <text><br /> <strong>Bold text</strong><br /> </text><br /> <text><br /> <u>Underlined text</u><br /> </text><br /> <text><br /> <span fg="red">Red text</span><br /> </text><br /> <text><br /> <span fg="blue">Blue text</span><br /> </text><br /> <text><br /> <strong fg="red">Bold red text</strong><br /> </text><br /> <text><br /> <strong>Bold</strong> and <span fg="blue">blue</span> combined<br /> </text><br /> </><br /> )<br />}</p><p class="my-3">const renderer = await createCliRenderer()<br />createRoot(renderer).render(<App />)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Component Extension</h2></p><p class="my-3">You can create custom components by extending OpenTUIs base renderables:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import {<br /> BoxRenderable,<br /> createCliRenderer,<br /> OptimizedBuffer,<br /> RGBA,<br /> type BoxOptions,<br /> type RenderContext,<br />} from "@opentui/core"<br />import { createRoot, extend } from "@opentui/react"</p><p class="my-3">// Create custom component class<br />class ButtonRenderable extends BoxRenderable {<br /> private _label: string = "Button"</p><p class="my-3"> constructor(ctx: RenderContext, options: BoxOptions & { label?: string }) {<br /> super(ctx, {<br /> border: true,<br /> borderStyle: "single",<br /> minHeight: 3,<br /> ...options,<br /> })</p><p class="my-3"> if (options.label) {<br /> this._label = options.label<br /> }<br /> }</p><p class="my-3"> protected renderSelf(buffer: OptimizedBuffer): void {<br /> super.renderSelf(buffer)</p><p class="my-3"> const centerX = this.x + Math.floor(this.width / 2 - this._label.length / 2)<br /> const centerY = this.y + Math.floor(this.height / 2)</p><p class="my-3"> buffer.drawText(this._label, centerX, centerY, RGBA.fromInts(255, 255, 255, 255))<br /> }</p><p class="my-3"> set label(value: string) {<br /> this._label = value<br /> this.requestRender()<br /> }<br />}</p><p class="my-3">// Add TypeScript support<br />declare module "@opentui/react" {<br /> interface OpenTUIComponents {<br /> consoleButton: typeof ButtonRenderable<br /> }<br />}</p><p class="my-3">// Register the component<br />extend({ consoleButton: ButtonRenderable })</p><p class="my-3">// Use in JSX<br />function App() {<br /> return (<br /> <box><br /> <consoleButton label="Click me!" style={{ backgroundColor: "blue" }} /><br /> <consoleButton label="Another button" style={{ backgroundColor: "green" }} /><br /> </box><br /> )<br />}</p><p class="my-3">const renderer = await createCliRenderer()<br />createRoot(renderer).render(<App />)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Using React DevTools</h2></p><p class="my-3">OpenTUI React supports <a href="https://github.com/facebook/react/tree/master/packages/react-devtools" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">React DevTools</a> for debugging your terminal applications. To enable DevTools integration:</p><p class="my-3">1. Install the optional peer dependency:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />bun add --dev react-devtools-core@7<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">2. Start the standalone React DevTools:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />npx react-devtools@7<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">3. Run your app with the </code>DEV<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> environment variable:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />DEV=true bun run your-app.ts<br /></code>``</p><p class="my-3">After the app starts, you should see the component tree in React DevTools. You can inspect and modify props in real-time, and changes will be reflected immediately in your terminal UI.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">When DevTools is connected, the WebSocket connection may prevent your process from exiting naturally.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:4"></template><template id="P:5"></template></div></div></div><script>self.__next_f.push([1,"27:[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-users h-4 w-4\",\"children\":[[\"$\",\"path\",\"1yyitq\",{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"}],[\"$\",\"circle\",\"nufk8\",{\"cx\":\"9\",\"cy\":\"7\",\"r\":\"4\"}],[\"$\",\"path\",\"kshegd\",{\"d\":\"M22 21v-2a4 4 0 0 0-3-3.87\"}],[\"$\",\"path\",\"1da9ce\",{\"d\":\"M16 3.13a4 4 0 0 1 0 7.75\"}],\"$undefined\"]}],\"Peer Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":3}]]}]\n"])</script><script>self.__next_f.push([1,"28:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=19.0.0\"}]]}],[\"$\",\"$L5\",\"react-devtools-core\",{\"href\":\"/package/react-devtools-core\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-devtools-core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.1\"}]]}],[\"$\",\"$L5\",\"ws\",{\"href\":\"/package/ws\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"ws\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.18.0\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":9}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@types/bun\",{\"href\":\"/package/%40types%2Fbun\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/bun\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"latest\"}]]}],[\"$\",\"$L5\",\"@types/node\",{\"href\":\"/package/%40types%2Fnode\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/node\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^24.0.0\"}]]}],[\"$\",\"$L5\",\"@types/react\",{\"href\":\"/package/%40types%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L2b\",\"$undefined\"]}],\"@types/react\"]}],\"$L2c\"]}],\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2b:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2c:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^19.0.0\"}]\n2d:[\"$\",\"$L5\",\"@types/react-reconciler\",{\"href\":\"/package/%40types%2Freact-reconciler\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react-reconciler\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.32.0\"}]]}]\n2e:[\"$\",\"$L5\",\"@types/ws\",{\"href\":\"/package/%40types%2Fws\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/ws\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.18.1\"}]]}]\n2f:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=19.0.0\"}]]}]\n30:[\"$\",\"$L5\",\"react-devtools-core\",{\"href\":\"/package/react-devtools-core\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-devtools-core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.0.1\"}]]}]\n31:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\""])</script><script>self.__next_f.push([1,":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5\"}]]}]\n32:[\"$\",\"$L5\",\"ws\",{\"href\":\"/package/ws\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"ws\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.18.0\"}]]}]\n"])</script><div hidden id="S:3"><div class="rounded-lg border p-3"><h4 class="mb-2 text-sm font-medium">Dist Tags</h4><div class="space-y-1"><div class="flex justify-between text-sm"><span class="text-muted-foreground">snapshot</span><a class="font-mono text-xs hover:underline" href="/package/@opentui/react/v/0.0.0-20260112-09d008ad">0.0.0-20260112-09d008ad</a></div><div class="flex justify-between text-sm"><span class="text-muted-foreground">latest</span><a class="font-mono text-xs hover:underline" href="/package/@opentui/react/v/0.1.77">0.1.77</a></div></div></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:5","P:5")</script><script>$RC("B:1","S:1")</script></body></html>