> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/anomalyco/opentui/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get started with OpenTUI in minutes by building your first terminal UI application

Get up and running with OpenTUI by building a simple "Hello World" terminal application. This guide walks you through installation, basic setup, and creating your first interactive TUI.

<Note>
  If you haven't installed OpenTUI yet, check out the [installation guide](/installation) first.
</Note>

## Prerequisites

* **Bun** 1.3.0 or later (recommended) or **Node.js** 18+
* **Zig** 0.15.2 (required for building from source)

## Create your first app

<Steps>
  <Step title="Install OpenTUI">
    Install the core package using your preferred package manager:

    <CodeGroup>
      ```bash bun theme={null}
      bun add @opentui/core
      ```

      ```bash npm theme={null}
      npm install @opentui/core
      ```

      ```bash yarn theme={null}
      yarn add @opentui/core
      ```

      ```bash pnpm theme={null}
      pnpm add @opentui/core
      ```
    </CodeGroup>
  </Step>

  <Step title="Create a basic app">
    Create a new file called `app.ts` with your first terminal UI:

    ```typescript theme={null}
    import { createCliRenderer, Text } from "@opentui/core"

    // Create the renderer
    const renderer = await createCliRenderer()

    // Create a text component
    const greeting = Text({
      content: "Hello, OpenTUI!",
      fg: "#00FFFF",
    })

    // Add to the renderer and display
    renderer.root.add(greeting)
    ```

    This creates a simple terminal UI that displays cyan-colored text.
  </Step>

  <Step title="Run your app">
    Execute your application with Bun:

    ```bash theme={null}
    bun run app.ts
    ```

    You should see "Hello, OpenTUI!" displayed in cyan in your terminal!
  </Step>

  <Step title="Add interactivity">
    Let's make it interactive by adding keyboard handling:

    ```typescript theme={null}
    import { createCliRenderer, Text, Box } from "@opentui/core"

    const renderer = await createCliRenderer()

    // Create a container
    const container = Box({
      width: "100%",
      height: "100%",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      padding: 2,
    })

    // Add text
    const greeting = Text({
      content: "Press any key... (Ctrl+C to exit)",
      fg: "#00FFFF",
    })

    container.add(greeting)
    renderer.root.add(container)

    // Handle keyboard input
    renderer.keyInput.on("keypress", (key) => {
      if (key.ctrl && key.name === "c") {
        renderer.destroy()
        process.exit(0)
      } else {
        greeting.setContent(`You pressed: ${key.name}`)
        renderer.requestRender()
      }
    })
    ```

    Now your app responds to keyboard input!
  </Step>

  <Step title="Add layout and styling">
    Create a more complex layout with multiple components:

    ```typescript theme={null}
    import { createCliRenderer, Text, Box, Input } from "@opentui/core"

    const renderer = await createCliRenderer()

    // Main container
    const container = Box({
      width: "100%",
      height: "100%",
      flexDirection: "column",
      padding: 2,
      gap: 1,
    })

    // Header
    const header = Box({
      width: "100%",
      border: true,
      borderStyle: "rounded",
      padding: 1,
      backgroundColor: "#1a1a1a",
    })

    const title = Text({
      content: "My First OpenTUI App",
      fg: "#00FFFF",
      bold: true,
    })

    header.add(title)

    // Input field
    const input = Input({
      placeholder: "Type something...",
      width: "100%",
    })

    input.on("change", (value: string) => {
      console.log("Input changed:", value)
    })

    // Add everything
    container.add(header)
    container.add(input)
    renderer.root.add(container)

    // Focus the input
    input.focus()
    ```

    This creates a styled header and an input field with focus management.
  </Step>
</Steps>

## Next steps

Now that you've built your first OpenTUI app, explore more features:

<CardGroup cols={2}>
  <Card title="Core concepts" icon="book" href="/core-concepts/renderer">
    Learn about renderers, renderables, and the component system
  </Card>

  <Card title="Components" icon="grid" href="/components/overview">
    Explore all available UI components
  </Card>

  <Card title="Styling guide" icon="palette" href="/guides/styling-and-colors">
    Master colors, text attributes, and styling
  </Card>

  <Card title="Build your first app" icon="hammer" href="/guides/building-your-first-app">
    Follow a complete tutorial to build a real application
  </Card>
</CardGroup>

## Quick examples

Try these standalone examples to see more features:

<Tabs>
  <Tab title="Text styling">
    ```typescript theme={null}
    import { createCliRenderer, Text, bold, fg, bg } from "@opentui/core"

    const renderer = await createCliRenderer()

    const styled = Text({
      content: [
        bold(fg("#00FFFF", "Bold cyan text")),
        " and ",
        bg("#FF0000", fg("#FFFF00", "yellow on red")),
      ],
    })

    renderer.root.add(styled)
    ```
  </Tab>

  <Tab title="Flexbox layout">
    ```typescript theme={null}
    import { createCliRenderer, Box, Text } from "@opentui/core"

    const renderer = await createCliRenderer()

    const container = Box({
      width: "100%",
      height: "100%",
      flexDirection: "row",
      justifyContent: "space-between",
      padding: 2,
    })

    container.add(
      Box({
        border: true,
        padding: 1,
        children: [Text({ content: "Left" })],
      })
    )

    container.add(
      Box({
        border: true,
        padding: 1,
        children: [Text({ content: "Center" })],
      })
    )

    container.add(
      Box({
        border: true,
        padding: 1,
        children: [Text({ content: "Right" })],
      })
    )

    renderer.root.add(container)
    ```
  </Tab>

  <Tab title="Interactive list">
    ```typescript theme={null}
    import { createCliRenderer, Box, Select } from "@opentui/core"

    const renderer = await createCliRenderer()

    const select = Select({
      items: [
        { label: "Option 1", value: "1" },
        { label: "Option 2", value: "2" },
        { label: "Option 3", value: "3" },
      ],
      width: 30,
      height: 10,
    })

    select.on("itemSelected", (item) => {
      console.log("Selected:", item)
    })

    renderer.root.add(select)
    select.focus()
    ```
  </Tab>
</Tabs>

## Resources

* [GitHub Repository](https://github.com/anomalyco/opentui)
* [Example Gallery](https://github.com/anomalyco/opentui/tree/main/packages/core/src/examples)
* [API Reference](/api/cli-renderer)