Opentui

import { defineCollection, z } from "astro:content"

const docs = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    description: z.string().optional(),
    order: z.number().int().nonnegative().optional(),
    navTitle: z.string().optional(),
    skill: z
      .object({
        include: z.boolean().default(true),
        entry: z.boolean().default(false),
        intents: z.array(z.string().trim().min(1)).default([]),
      })
      .optional(),
  }),
})

export const collections = {
  docs,
}


---
title: React
description: Build terminal UIs with React and OpenTUI
order: 2
skill:
  entry: true
  intents: [react, jsx, hooks, keyboard, paste, focus, blur, selection, animation, testing]
---

# React bindings

Build terminal user interfaces using React with familiar patterns and components.

## Installation

Quick start with [bun](https://bun.sh) and [create-tui](https://github.com/msmps/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 <text>Hello, world!</text>
}

const renderer = await createCliRenderer()
createRoot(renderer).render(<App />)
```

## TypeScript configuration

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
  }
}
```

## Runtime-loaded plugin support (if needed)

If your app loads external TS/TSX modules at runtime (for example a file-based plugin system), import this once in your app entry before dynamic imports:

```ts
import "@opentui/react/runtime-plugin-support"
```

Use this for both normal Bun runs and standalone compiled executables.

## Components

OpenTUI React provides JSX intrinsic elements that map to core renderables:

### Layout & display

- `<text>` - Text display with styling
- `<box>` - Container with borders and layout
- `<scrollbox>` - Scrollable container
- `<ascii-font>` - ASCII art text

QR code support is available from `@opentui/qrcode/react` and must be registered explicitly with `registerQRCode()`.

### Input

- `<input>` - Single-line text input
- `<textarea>` - Multi-line text input
- `<select>` - Selection list
- `<tab-select>` - Tab-based selection

### Code & diff

- `<code>` - Syntax-highlighted code
- `<line-number>` - Line numbers with diff/diagnostic support
- `<diff>` - Unified or split diff viewer
- `<markdown>` - Markdown rendering

### Text modifiers

Use inside `<text>` components:

- `<span>` - Inline styled text
- `<strong>`, `<b>` - Bold text
- `<em>`, `<i>` - Italic text
- `<u>` - Underlined text
- `<br>` - Line break
- `<a>` - Link text

## API reference

### `createRoot(renderer)`

Creates a React root for rendering into the terminal.

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

const renderer = await createCliRenderer()
createRoot(renderer).render(<App />)
```

For plugin slots, see [Plugin Slots overview](/docs/plugins/slots) and [React slots](/docs/plugins/react).

## Hooks

### `useRenderer()`

Access the OpenTUI renderer instance.

```tsx
import { useRenderer } from "@opentui/react"
import { useEffect } from "react"

function App() {
  const renderer = useRenderer()

  useEffect(() => {
    renderer.console.show()
    console.log("Hello from console!")
  }, [])

  return <box />
}
```

### `useKeyboard(handler, options?)`

Handle keyboard events.

```tsx
import { useKeyboard, useRenderer } from "@opentui/react"

function App() {
  const renderer = useRenderer()

  useKeyboard((key) => {
    if (key.name === "escape") {
      renderer.destroy()
    }
  })

  return <text>Press ESC to close</text>
}
``