# Introduction

Copy-paste terminal UI components for React. Built on Ink and OpenTUI, works with the shadcn CLI.



**termcn** provides beautifully designed, accessible, and customizable terminal UI components. Built on [Ink](https://github.com/vadimdemedes/ink) and [OpenTUI](https://github.com/anomalyco/opentui), and designed to work seamlessly with the [shadcn CLI](https://ui.shadcn.com).

Philosophy [#philosophy]

termcn follows the shadcn model for terminal UIs: copy-paste components you can own, with zero lock-in and sensible defaults that work immediately.

Terminal apps are often treated as afterthoughts — bolted together with ad-hoc formatting and inconsistent styling. termcn takes a different approach. It stays close to each renderer's primitives, keeps the API familiar, and lets you drop down to raw Ink or OpenTUI components whenever you need more control.

The goal is simple: make terminal UIs feel like the rest of your stack — composable, themeable, accessible, and easy to customize.

Why termcn? [#why-termcn]

Most terminal component setups are either too opinionated or too scattered. termcn is built for teams that want to ship quickly without giving up control:

* **Own Your Code:** Copy the components into your project and customize everything.
* **Start Fast:** Run one command and render your first terminal UI with production-ready defaults.
* **Scale Safely:** Build on top of Ink or OpenTUI directly, then drop to raw APIs when needed.

Any Terminal Style [#any-terminal-style]

termcn works with any terminal that supports ANSI escape codes and Unicode. This means your components look great everywhere:

* [iTerm2](https://iterm2.com) — Full Unicode and true color support on macOS
* [Kitty](https://sw.kovidgoyal.net/kitty/) — GPU-accelerated with image protocol support
* [Alacritty](https://alacritty.org) — Fast, cross-platform, GPU-accelerated
* [Windows Terminal](https://github.com/microsoft/terminal) — Modern terminal for Windows
* [Ghostty](https://ghostty.org) — Modern, GPU-accelerated terminal emulator
* And any other terminal with ANSI/Unicode support

Features [#features]

<div className="not-prose grid gap-4 sm:grid-cols-2 mt-4">
  <FeatureCard icon="ZapIcon" title="Zero Config" description="Works out of the box with sensible defaults. No boilerplate needed." />

  <FeatureCard icon="SunMoonIcon" title="Theme Aware" description="Automatically adapts colors to your chosen terminal theme." />

  <FeatureCard icon="LayoutGridIcon" title="Composable" description="Build complex terminal UIs with simple, declarative components." />

  <FeatureCard icon="Code2Icon" title="TypeScript" description="Full type safety with comprehensive TypeScript support." />

  <FeatureCard icon="ClipboardCopyIcon" title="Copy & Paste" description="Own your code. No runtime dependencies, just install into your project." />

  <FeatureCard icon="BlocksIcon" title="shadcn Compatible" description="Uses the same registry format — add components with npx shadcn add." />
</div>



# Installation

Install terminal components, hooks, and themes from the registry.



Prerequisites [#prerequisites]

A project with [Ink](https://github.com/vadimdemedes/ink) or [OpenTUI](https://github.com/anomalyco/opentui) set up.

Installation [#installation]

Run the following command to add any component:

```bash
npx shadcn@latest add @termcn/ink/spinner
```

OpenTUI components use the `opentui/` namespace:

```bash
npx shadcn@latest add @termcn/opentui/spinner
```

Usage [#usage]

Import and use the component:

```tsx
import { Spinner } from "@/components/ui/spinner";
import { Text } from "ink";

export function App() {
  return (
    <>
      <Text>Loading...</Text>
      <Spinner />
    </>
  );
}
```

Install a Theme [#install-a-theme]

termcn ships bundled terminal themes that integrate with the `ThemeProvider`:

For Ink:

```bash
npx shadcn@latest add @termcn/ink/theme-provider
```

For OpenTUI:

```bash
npx shadcn@latest add @termcn/opentui/theme-provider
```

Providers install into `providers/`. Wrap your app only when you want to override the default theme:

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { draculaTheme } from "@/lib/terminal-themes/dracula";

export function App() {
  return <ThemeProvider theme={draculaTheme}></ThemeProvider>;
}
```

Motion and Unicode overrides are separate optional items:

```bash
npx shadcn@latest add @termcn/ink/motion-provider @termcn/ink/unicode-provider
```

Use the `opentui/` namespace for the equivalent OpenTUI providers.


# MCP

Learn how to use the shadcn MCP (Model Context Protocol) server with termcn.



[MCP](https://modelcontextprotocol.io/) is an open protocol that standardizes how applications provide context to LLMs. The shadcn CLI can register an MCP server so your editor can discover registry components—including items you install from **termcn** via the same CLI.

Configure MCP [#configure-mcp]

Run:

```bash
npx shadcn@latest mcp init
```

Choose your MCP client when prompted, then enable the MCP server in that client to finish setup.

Usage [#usage]

With MCP enabled, you can ask your IDE to work with **Ink** and **OpenTUI** terminal UI patterns and termcn registry components. Example prompts:

* Build a CLI status screen with **Spinner**, **ProgressBar**, and **StatusMessage**.
* Add a **CommandPalette** and **Menu** for keyboard-driven navigation in a terminal app.
* Create an AI-style flow with **ChatThread**, **ChatMessage**, **ToolCall**, and **StreamingText**.
* Lay out a TUI dashboard using **Box**, **Stack**, **Table**, and **DataGrid** with a **Sidebar**.
* Implement a multi-step flow with **Wizard**, **Form**, **Confirm**, and **Modal**.

Install components from this registry with `npx shadcn@latest add` and the JSON URL from each docs page. Components work with provider-optional hooks and sensible defaults. Add `ThemeProvider`, `MotionProvider`, or `UnicodeProvider` only when the application needs an override.


# Registry

Learn how to use the termcn registry with the shadcn CLI.



The **termcn** registry ships Ink and OpenTUI components, hooks, providers, and themes in the [shadcn registry format](https://ui.shadcn.com/docs/registry). Register the namespace once in `components.json`, then pull items by name with the CLI.

Setup [#setup]

Add a **registries** entry for this site. See the [shadcn registry documentation](https://ui.shadcn.com/docs/registry) for all `components.json` fields and behaviors.

```json
{
  "registries": {
    "@termcn": "https://termcn.dev/r/{name}.json"
  }
}
```

You can replace `@termcn` with another namespace; it only needs to match what you pass to `shadcn add`.

Usage [#usage]

Items are namespaced by base: `ink/` for Ink and `opentui/` for OpenTUI.

Registry files follow these destinations:

* Components install into `components/ui/`.
* Hooks install into the configured `hooks/` directory.
* Theme, motion, and Unicode providers install into `providers/`.
* Themes install into `lib/terminal-themes/`.

Components declare their hook dependencies, so installing a component does not install or require a provider.

Ink [#ink]

Install a component:

```bash
npx shadcn@latest add @termcn/ink/spinner
```

Install a theme:

```bash
npx shadcn@latest add @termcn/ink/theme-dracula
```

Install the theme provider:

```bash
npx shadcn@latest add @termcn/ink/theme-provider
```

Install the motion provider:

```bash
npx shadcn@latest add @termcn/ink/motion-provider
```

Install the unicode provider:

```bash
npx shadcn@latest add @termcn/ink/unicode-provider
```

Without a registry alias, use the full URL (as on each docs page):

```bash
npx shadcn@latest add https://termcn.dev/r/ink/spinner.json
```

OpenTUI [#opentui]

Install a component:

```bash
npx shadcn@latest add @termcn/opentui/spinner
```

Install a theme:

```bash
npx shadcn@latest add @termcn/opentui/theme-dracula
```

Install the theme provider:

```bash
npx shadcn@latest add @termcn/opentui/theme-provider
```

Install the motion provider:

```bash
npx shadcn@latest add @termcn/opentui/motion-provider
```

Install the unicode provider:

```bash
npx shadcn@latest add @termcn/opentui/unicode-provider
```

Without a registry alias, use the full URL (as on each docs page):

```bash
npx shadcn@latest add https://termcn.dev/r/opentui/spinner.json
```


# Charts

Terminal-native charts and data visualizations for Ink and OpenTUI.



Basic [#basic]

<ComponentsList className="mt-4" folderName="Charts" base="ink" category="basic" />

Dither [#dither]

<ComponentsList className="mt-4" folderName="Charts" base="ink" category="dither" />


# Components

Here you can find all the terminal components available in the library.



Layout [#layout]

<ComponentsList className="mt-4" base="ink" category="layout" />

Typography [#typography]

<ComponentsList className="mt-4" base="ink" category="typography" />

Input [#input]

<ComponentsList className="mt-4" base="ink" category="input" />

Selection [#selection]

<ComponentsList className="mt-4" base="ink" category="selection" />

Data [#data]

<ComponentsList className="mt-4" base="ink" category="data" />

Feedback [#feedback]

<ComponentsList className="mt-4" base="ink" category="feedback" />

Navigation [#navigation]

<ComponentsList className="mt-4" base="ink" category="navigation" />

Overlays [#overlays]

<ComponentsList className="mt-4" base="ink" category="overlays" />

Forms [#forms]

<ComponentsList className="mt-4" base="ink" category="forms" />

Utility [#utility]

<ComponentsList className="mt-4" base="ink" category="utility" />

AI [#ai]

<ComponentsList className="mt-4" base="ink" category="ai" />


# Templates

Pre-built full-screen templates and layouts for common terminal app patterns.



<ComponentsList folderName="Templates" />


# Themes

Here you can find all the terminal themes available in the library.



<ComponentsList folderName="Themes" />


# 5 April 2026 - Initial Release

Initial release focused on Ink with 113 components and templates in total, plus a separate theme system.





We shipped the initial release of termcn focused on [Ink](https://term.ink), with 113 components and templates and 10+ themes.

<div className="mt-6 flex w-full items-center justify-center rounded-lg border bg-muted/50 py-32">
  <InkIcon className="size-12" />
</div>


# 4 May 2026 - More Themes

Expanded the terminal theme catalog to 30 themes, including AMOLED, Aura, Ayu, and many more.





We expanded the terminal theme catalog to 30 themes.

<ThemePreviewGrid
  themes="[
  &#x22;amoled&#x22;,
  &#x22;aura&#x22;,
  &#x22;ayu&#x22;,
  &#x22;carbonfox&#x22;,
  &#x22;catppuccin-frappe&#x22;,
  &#x22;catppuccin-macchiato&#x22;,
  &#x22;cobalt2&#x22;,
  &#x22;cursor&#x22;,
  &#x22;everforest&#x22;,
  &#x22;flexoki&#x22;,
  &#x22;github&#x22;,
  &#x22;gruvbox&#x22;,
  &#x22;kanagawa&#x22;,
  &#x22;lucent-orng&#x22;,
  &#x22;material&#x22;,
  &#x22;matrix&#x22;,
  &#x22;mercury&#x22;,
  &#x22;nightowl&#x22;,
  &#x22;oc-2&#x22;,
  &#x22;onedarkpro&#x22;,
  &#x22;opencode&#x22;,
  &#x22;orng&#x22;,
  &#x22;osaka-jade&#x22;,
  &#x22;palenight&#x22;,
  &#x22;rosepine&#x22;,
  &#x22;shadesofpurple&#x22;,
  &#x22;synthwave84&#x22;,
  &#x22;vercel&#x22;,
  &#x22;vesper&#x22;,
  &#x22;zenburn&#x22;,
]"
/>


# 26 May 2026 - OpenTUI Support

Added OpenTUI support across the registry and documentation, enabling OpenTUI-based terminal UI components and previews.





We added [OpenTUI](https://opentui.com) support across the registry and documentation, making it possible to build and preview terminal UIs with it.

<div className="mt-6 flex w-full items-center justify-center rounded-lg border bg-muted/50 py-32">
  <OpenTUIIcon className="size-12" />
</div>


# 16 July 2026 - Dither Charts for Ink and OpenTUI

Added six terminal-native dither chart families for Ink and OpenTUI, with composable primitives, interaction, motion, and accessible fallbacks.



We shipped Dither Charts for both Ink and OpenTUI: a terminal-native visualization system that uses density, texture, and color to make data legible in character cells.

The release includes composable [area](/docs/charts/ink/dither-area), [bar](/docs/charts/ink/dither-bar), [line](/docs/charts/ink/dither-line), [pie and donut](/docs/charts/ink/dither-pie), [radar](/docs/charts/ink/dither-radar), and [sparkline](/docs/charts/ink/dither-sparkline) components. Every chart family is also available through the corresponding [OpenTUI collection](/docs/charts/opentui/dither-area).

Charts support axes, grids, dots, legends, tooltips, grouped and stacked data, percent layouts, bloom effects, animated entrances, and keyboard-driven inspection and selection. They also include no-color, ASCII, reduced-motion, and screen-reader-friendly output paths for less capable or nonvisual terminal environments.

Install a chart directly from registry:

For Ink:

```bash
npx shadcn@latest add @termcn/ink/dither-area-chart
```

For OpenTUI:

```bash
npx shadcn@latest add @termcn/opentui/dither-area-chart
```


# 3 August 2026 - Accessibility improvements for Ink

Improved Ink keyboard interaction, focus behavior, readable status output, motion and Unicode fallbacks, and nonvisual output.



We completed an accessibility-focused pass across the Ink component collection. The implementation follows Ink's terminal accessibility contract instead of presenting terminal accessibility as browser accessibility or making a general WCAG-conformance claim.

Ink [#ink]

Ink components now use the closest supported native role and state, contextual labels, focus-gated input handling, and predictable keyboard traversal. Interactive overlays contain and restore focus, while visual-only output such as charts, QR codes, big text, gradients, cursors, and animation frames exposes concise text alternatives in screen-reader mode.

Text editing and responsive output account for graphemes, wide characters, terminal-cell width, and terminal resizing. Animation work is also suspended for screen-reader, reduced-motion, inactive, and CI states.

Provider architecture [#provider-architecture]

Theme, motion, and Unicode configuration now use separate provider and hook registry items in both the Ink and OpenTUI collections. Components depend on the provider-optional hooks, so installing a component does not force an application-level provider. This is an architecture consistency change for OpenTUI, not a claim that this release completed the same accessibility pass for OpenTUI.

Ink components continue to ship as source-owned, standalone registry items. Consumers can install only the component and its declared dependencies, inspect the implementation, and adapt labels, keyboard behavior, rendering, and terminal-specific fallbacks to their application.


# Changelog

Latest updates and announcements for termcn.



3 August 2026 - Accessibility improvements for Ink [#3-august-2026---accessibility-improvements-for-ink]

We improved keyboard interaction, focus behavior, readable status output, motion and Unicode fallbacks, and nonvisual output across the Ink component collection. Theme, motion, and Unicode configuration now also use separate provider and hook items in both registries.

16 July 2026 - Dither Charts for Ink and OpenTUI [#16-july-2026---dither-charts-for-ink-and-opentui]

We shipped six terminal-native chart families for Ink and OpenTUI, with composable primitives, keyboard interaction, motion, and accessible fallback output.

26 May 2026 - OpenTUI Support [#26-may-2026---opentui-support]

We added OpenTUI support across the registry and documentation, making it possible to build and preview terminal UIs with OpenTUI alongside Ink.

4 May 2026 - More Themes [#4-may-2026---more-themes]

We expanded the terminal theme catalog to 30 themes, including [Amoled](/themes/amoled), [Aura](/themes/aura), [Ayu](/themes/ayu), and many more.

5 April 2026 - Initial Release [#5-april-2026---initial-release]

We shipped the initial release of termcn focused on Ink, with 113 components and templates in total and a separate theme system.

Follow [termcn on GitHub](https://github.com/termcn/termcn) for source history and future tagged releases.


# Theming

Configure terminal themes, motion, and Unicode behavior for terminal apps.





<ComponentPreview base="ink" name="theme-showcase" />

ThemeProvider [#themeprovider]

Ink components use the default theme without a provider. Install `ThemeProvider` when you want to supply another theme or update the active theme at runtime.

```bash
npx shadcn@latest add @termcn/ink/theme-provider
```

Usage [#usage]

```tsx
import { Spinner } from "@/components/ui/spinner";
import { defaultTheme } from "@/lib/terminal-themes/default";
import { ThemeProvider } from "@/providers/theme-provider";

export function Example() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Spinner label="Generating registry items" />
    </ThemeProvider>
  );
}
```

Theme-aware components receive the provider-optional `use-theme` hook transitively. Application code can import `useTheme` or `useThemeUpdater` from `@/hooks/use-theme` when it needs direct access.

Available themes [#available-themes]

<ThemePreviewGrid base="ink" />

Custom themes [#custom-themes]

Use `createTheme` to extend the default tokens while preserving the complete theme shape.

```tsx
import { createTheme } from "@/providers/theme-provider";

export const oceanTheme = createTheme({
  name: "ocean",
  colors: {
    primary: "#0ea5e9",
    accent: "#22d3ee",
    background: "#0f172a",
    foreground: "#e2e8f0",
  },
});
```

MotionProvider [#motionprovider]

Motion is independent from the active theme. Install `MotionProvider` only when the application needs to override the default reduced-motion detection.

```bash
npx shadcn@latest add @termcn/ink/motion-provider
```

Usage [#usage-1]

```tsx
import { MotionProvider } from "@/providers/motion-provider";

export function Example() {
  return (
    <MotionProvider reducedMotion>
      <App />
    </MotionProvider>
  );
}
```

Without the provider, motion follows `NO_MOTION=1` and `CI=true`.

UnicodeProvider [#unicodeprovider]

Unicode support is independent from the active theme. Install `UnicodeProvider` only when the application needs to override terminal detection.

```bash
npx shadcn@latest add @termcn/ink/unicode-provider
```

Usage [#usage-2]

```tsx
import { UnicodeProvider } from "@/providers/unicode-provider";

export function Example() {
  return (
    <UnicodeProvider unicode={false}>
      <App />
    </UnicodeProvider>
  );
}
```

Without the provider, Unicode support follows terminal detection and `NO_UNICODE=1`.


# Theming

Configure terminal themes, motion, and Unicode behavior for terminal apps.





<ComponentPreview base="opentui" name="theme-showcase" />

ThemeProvider [#themeprovider]

OpenTUI components use the default theme without a provider. Install `ThemeProvider` when you want to supply another theme or update the active theme at runtime.

```bash
npx shadcn@latest add @termcn/opentui/theme-provider
```

Usage [#usage]

```tsx
import { Spinner } from "@/components/ui/spinner";
import { defaultTheme } from "@/lib/terminal-themes/default";
import { ThemeProvider } from "@/providers/theme-provider";

export function Example() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Spinner label="Generating registry items" />
    </ThemeProvider>
  );
}
```

Theme-aware components receive the provider-optional `use-theme` hook transitively. Application code can import `useTheme` or `useThemeUpdater` from `@/hooks/use-theme` when it needs direct access.

Available themes [#available-themes]

<ThemePreviewGrid base="opentui" />

Custom themes [#custom-themes]

Use `createTheme` to extend the default tokens while preserving the complete theme shape.

```tsx
import { createTheme } from "@/providers/theme-provider";

export const oceanTheme = createTheme({
  name: "ocean",
  colors: {
    primary: "#0ea5e9",
    accent: "#22d3ee",
    background: "#0f172a",
    foreground: "#e2e8f0",
  },
});
```

MotionProvider [#motionprovider]

Motion is independent from the active theme. Install `MotionProvider` only when the application needs to override the default reduced-motion detection.

```bash
npx shadcn@latest add @termcn/opentui/motion-provider
```

Usage [#usage-1]

```tsx
import { MotionProvider } from "@/providers/motion-provider";

export function Example() {
  return (
    <MotionProvider reducedMotion>
      <App />
    </MotionProvider>
  );
}
```

Without the provider, motion follows `NO_MOTION=1` and `CI=true`.

UnicodeProvider [#unicodeprovider]

Unicode support is independent from the active theme. Install `UnicodeProvider` only when the application needs to override terminal detection.

```bash
npx shadcn@latest add @termcn/opentui/unicode-provider
```

Usage [#usage-2]

```tsx
import { UnicodeProvider } from "@/providers/unicode-provider";

export function Example() {
  return (
    <UnicodeProvider unicode={false}>
      <App />
    </UnicodeProvider>
  );
}
```

Without the provider, Unicode support follows terminal detection and `NO_UNICODE=1`.


# Bar Chart

Horizontal and vertical bar chart with labels



<ComponentPreview base="ink" name="bar-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/bar-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/accessibility.ts" title="lib/accessibility.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="bar-chart" title="components/ui/bar-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { BarChart } from "@/components/ui/bar-chart";
```

```tsx
<BarChart
  data={[
    { label: "Mon", value: 12 },
    { label: "Tue", value: 28 },
  ]}
  width={40}
  showValues
  title="Weekly Traffic"
/>
```

API Reference [#api-reference]

BarChart [#barchart]

| Prop         | Type                         | Default        |
| ------------ | ---------------------------- | -------------- |
| `data`       | `BarChartItem[]`             | `required`     |
| `direction`  | `"horizontal" \| "vertical"` | `"horizontal"` |
| `width`      | `number`                     | `30`           |
| `height`     | `number`                     | `10`           |
| `showValues` | `boolean`                    | `true`         |
| `title`      | `string`                     | -              |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Dither Area Chart

Composable dithered area charts with layered fills, dots, axes, stacking, bloom, and keyboard interaction



<ComponentPreview base="ink" name="dither-area-chart-demo" rows="22" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/dither-area-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/lib/dither-area-chart-utils.ts" title="lib/dither-area-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="dither-area-chart" title="components/ui/dither-area-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  Area,
  AreaChart,
  Grid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "@/components/ui/dither-area-chart";
import type { ChartConfig } from "@/components/ui/dither-area-chart";
```

```tsx
const data = [
  { month: "Jan", desktop: 38, mobile: 22 },
  { month: "Feb", desktop: 52, mobile: 31 },
  { month: "Mar", desktop: 47, mobile: 35 },
];

const config = {
  desktop: { color: "blue", label: "Desktop" },
  mobile: { color: "pink", label: "Mobile" },
} satisfies ChartConfig;

<AreaChart config={config} data={data} height={12} width={56}>
  <Grid horizontal />
  <XAxis dataKey="month" />
  <YAxis tickCount={4} />
  <Area dataKey="desktop" variant="gradient" />
  <Area dataKey="mobile" variant="dotted" />
  <Legend align="left" />
  <Tooltip labelKey="month" />
</AreaChart>;
```

Examples [#examples]

Fill variants [#fill-variants]

Set `variant` on each `Area` to choose a gradient, dotted, hatched, or solid fill.

<ComponentPreview base="ink" name="dither-area-chart-variants" rows="17" />

Stacking modes [#stacking-modes]

Use `stackType="stacked"` for cumulative values or `stackType="percent"` for normalized proportions.

<ComponentPreview base="ink" name="dither-area-chart-stacking" rows="10" />

API Reference [#api-reference]

| Prop               | Type                                                | Default     |
| ------------------ | --------------------------------------------------- | ----------- |
| `data`             | `TData[]`                                           | required    |
| `config`           | `ChartConfig`                                       | required    |
| `width`            | `number`                                            | `56`        |
| `height`           | `number`                                            | `12`        |
| `stackType`        | `"default" \| "stacked" \| "percent"`               | `"default"` |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`     |
| `markerIndex`      | `number \| null`                                    | `null`      |
| `interactive`      | `boolean`                                           | `true`      |
| `noColor`          | `boolean`                                           | `false`     |
| `screenReaderMode` | `boolean`                                           | `false`     |

Use left/right to inspect points, up/down to focus a series, Enter to select,
Escape to clear, and R to replay animation. H/J/K/L are supported too.

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys or `h` / `j` / `k` / `l` move through the chart; `Enter` / `Space` select a point; `Escape` clears the active point; `r` restarts enabled animation.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Dither Bar Chart

Dithered grouped, stacked, and percent bar charts with terminal-native textures and interaction



<ComponentPreview base="ink" name="dither-bar-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/dither-bar-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/lib/dither-bar-chart-utils.ts" title="lib/dither-bar-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="dither-bar-chart" title="components/ui/dither-bar-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  Bar,
  BarChart,
  Grid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "@/components/ui/dither-bar-chart";
import type { ChartConfig } from "@/components/ui/dither-bar-chart";
```

```tsx
const data = [
  { month: "Jan", direct: 34, search: 18 },
  { month: "Feb", direct: 47, search: 24 },
  { month: "Mar", direct: 42, search: 29 },
];

const config = {
  direct: { color: "green", label: "Direct" },
  search: { color: "purple", label: "Search" },
} satisfies ChartConfig;

<BarChart config={config} data={data} stackType="stacked" width={56}>
  <Grid horizontal />
  <XAxis dataKey="month" />
  <YAxis tickCount={4} />
  <Bar dataKey="direct" variant="gradient" />
  <Bar dataKey="search" variant="hatched" />
  <Legend align="left" />
  <Tooltip labelKey="month" />
</BarChart>;
```

Examples [#examples]

Bar textures [#bar-textures]

Set `variant` on a `Bar` to render gradient, dotted, hatched, or solid cells.

<ComponentPreview base="ink" name="dither-bar-chart-variants" rows="17" />

Stacking modes [#stacking-modes]

Switch between cumulative stacks and normalized percent stacks with `stackType`.

<ComponentPreview base="ink" name="dither-bar-chart-stacking" rows="10" />

API Reference [#api-reference]

| Prop               | Type                                                | Default     |
| ------------------ | --------------------------------------------------- | ----------- |
| `data`             | `TData[]`                                           | required    |
| `config`           | `ChartConfig`                                       | required    |
| `width`            | `number`                                            | `56`        |
| `height`           | `number`                                            | `12`        |
| `stackType`        | `"default" \| "stacked" \| "percent"`               | `"default"` |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`     |
| `interactive`      | `boolean`                                           | `true`      |
| `noColor`          | `boolean`                                           | `false`     |
| `screenReaderMode` | `boolean`                                           | `false`     |

`width` is the preferred maximum. The chart clamps itself to the current Ink
stdout width when the terminal is narrower.

Arrow keys or H/J/K/L navigate chart state; Enter selects clickable series and
Escape clears the active point.

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys or `h` / `j` / `k` / `l` move through the chart; `Enter` / `Space` select a point; `Escape` clears the active point; `r` restarts enabled animation.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Dither Line Chart

Dithered multi-series line charts with solid or dashed strokes, markers, axes, and terminal interaction



<ComponentPreview base="ink" name="dither-line-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/dither-line-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/lib/dither-line-chart-utils.ts" title="lib/dither-line-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="dither-line-chart" title="components/ui/dither-line-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  ActiveDot,
  Dot,
  Grid,
  Line,
  LineChart,
  Tooltip,
  XAxis,
  YAxis,
} from "@/components/ui/dither-line-chart";
import type { ChartConfig } from "@/components/ui/dither-line-chart";
```

```tsx
const data = [
  { month: "Jan", latency: 24 },
  { month: "Feb", latency: 31 },
  { month: "Mar", latency: 27 },
];

const config = {
  latency: { color: "purple", label: "Latency" },
} satisfies ChartConfig;

<LineChart config={config} data={data} markerIndex={1} width={56}>
  <Grid horizontal />
  <XAxis dataKey="month" />
  <YAxis tickCount={4} />
  <Line dataKey="latency" strokeVariant="solid">
    <Dot variant="colored-border" />
    <ActiveDot variant="filled" />
  </Line>
  <Tooltip labelKey="month" />
</LineChart>;
```

Examples [#examples]

Stroke and marker variants [#stroke-and-marker-variants]

Use `strokeVariant` for solid or dashed lines. `Dot` and `ActiveDot` control regular and inspected markers independently.

<ComponentPreview base="ink" name="dither-line-chart-variants" rows="10" />

API Reference [#api-reference]

| Prop               | Type                                                | Default  |
| ------------------ | --------------------------------------------------- | -------- |
| `data`             | `TData[]`                                           | required |
| `config`           | `ChartConfig`                                       | required |
| `width`            | `number`                                            | `56`     |
| `height`           | `number`                                            | `12`     |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`  |
| `markerIndex`      | `number \| null`                                    | `null`   |
| `interactive`      | `boolean`                                           | `true`   |
| `noColor`          | `boolean`                                           | `false`  |
| `screenReaderMode` | `boolean`                                           | `false`  |

Keyboard controls match the area chart: arrows or H/J/K/L navigate, Enter
selects a series, Escape clears, and R replays enabled motion.

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys or `h` / `j` / `k` / `l` move through the chart; `Enter` / `Space` select a point; `Escape` clears the active point; `r` restarts enabled animation.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Dither Pie Chart

Dithered pie and donut charts with textured slices, legends, tooltips, and keyboard inspection



<ComponentPreview base="ink" name="dither-pie-chart-demo" rows="21" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/dither-pie-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/lib/dither-pie-chart-utils.ts" title="lib/dither-pie-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="dither-pie-chart" title="components/ui/dither-pie-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  Legend,
  Pie,
  PieChart,
  Tooltip,
} from "@/components/ui/dither-pie-chart";
import type { ChartConfig } from "@/components/ui/dither-pie-chart";
```

```tsx
const data = [
  { channel: "direct", value: 42 },
  { channel: "search", value: 31 },
  { channel: "social", value: 17 },
];

const config = {
  direct: { color: "blue", label: "Direct" },
  search: { color: "green", label: "Search" },
  social: { color: "pink", label: "Social" },
} satisfies ChartConfig;

<PieChart
  config={config}
  data={data}
  dataKey="value"
  innerRadius={0.42}
  nameKey="channel"
  width={46}
>
  <Pie variant="gradient" />
  <Legend align="left" />
  <Tooltip />
</PieChart>;
```

Examples [#examples]

Textures and donut shapes [#textures-and-donut-shapes]

All four fill variants work for pies and donuts. Set `innerRadius` between `0` and `0.92` to open the center.

<ComponentPreview base="ink" name="dither-pie-chart-variants" rows="23" />

API Reference [#api-reference]

| Prop               | Type                        | Default  |
| ------------------ | --------------------------- | -------- |
| `data`             | `TData[]`                   | required |
| `config`           | `ChartConfig`               | required |
| `dataKey`          | `string`                    | required |
| `nameKey`          | `string`                    | required |
| `innerRadius`      | `number` from `0` to `0.92` | `0`      |
| `width`            | `number`                    | `56`     |
| `height`           | `number`                    | `12`     |
| `markerIndex`      | `number \| null`            | `null`   |
| `noColor`          | `boolean`                   | `false`  |
| `screenReaderMode` | `boolean`                   | `false`  |

Use left/right to inspect slices and up/down to focus legend entries.

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys or `h` / `j` / `k` / `l` move through the chart; `Enter` / `Space` select a point; `Escape` clears the active point; `r` restarts enabled animation.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Dither Radar Chart

Dithered radar charts for comparing multiple series across terminal-friendly radial axes



<ComponentPreview base="ink" name="dither-radar-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/dither-radar-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/lib/dither-radar-chart-utils.ts" title="lib/dither-radar-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="dither-radar-chart" title="components/ui/dither-radar-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  Legend,
  Radar,
  RadarChart,
  Tooltip,
} from "@/components/ui/dither-radar-chart";
import type { ChartConfig } from "@/components/ui/dither-radar-chart";
```

```tsx
const data = [
  { metric: "Speed", desktop: 82, mobile: 68 },
  { metric: "Quality", desktop: 74, mobile: 79 },
  { metric: "Reach", desktop: 66, mobile: 88 },
  { metric: "Trust", desktop: 91, mobile: 72 },
];

const config = {
  desktop: { color: "blue", label: "Desktop" },
  mobile: { color: "pink", label: "Mobile" },
} satisfies ChartConfig;

<RadarChart config={config} data={data} nameKey="metric" width={52}>
  <Radar dataKey="desktop" variant="gradient" />
  <Radar dataKey="mobile" variant="dotted" />
  <Legend align="left" />
  <Tooltip labelKey="metric" />
</RadarChart>;
```

Examples [#examples]

Fill variants [#fill-variants]

Choose gradient, dotted, hatched, or solid polygon fills independently for each radar series.

<ComponentPreview base="ink" name="dither-radar-chart-variants" rows="27" />

API Reference [#api-reference]

| Prop               | Type                                                | Default  |
| ------------------ | --------------------------------------------------- | -------- |
| `data`             | `TData[]`                                           | required |
| `config`           | `ChartConfig`                                       | required |
| `nameKey`          | `string`                                            | required |
| `width`            | `number`                                            | `56`     |
| `height`           | `number`                                            | `12`     |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`  |
| `markerIndex`      | `number \| null`                                    | `null`   |
| `noColor`          | `boolean`                                           | `false`  |
| `screenReaderMode` | `boolean`                                           | `false`  |

The standard chart keyboard controls inspect axes, focus series, and replay
enabled entrance motion.

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys or `h` / `j` / `k` / `l` move through the chart; `Enter` / `Space` select a point; `Escape` clears the active point; `r` restarts enabled animation.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Dither Sparkline

Compact dithered sparklines for terminal dashboards, summaries, and inline metrics



<ComponentPreview base="ink" name="dither-sparkline-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/dither-sparkline
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/ink/lib/dither-sparkline-utils.ts" title="lib/dither-sparkline-utils.ts" />

      <ComponentSource src="registry/bases/ink/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="dither-sparkline" title="components/ui/dither-sparkline.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Sparkline } from "@/components/ui/dither-sparkline";
```

```tsx
<Sparkline
  color="blue"
  data={[18, 26, 23, 41, 37, 52, 49, 63]}
  height={4}
  markerIndex={5}
  title="Requests"
  variant="gradient"
  width={28}
/>
```

Examples [#examples]

Fill and marker variants [#fill-and-marker-variants]

Sparklines support every dither fill. Add `markerIndex` to highlight a specific sample without enabling interaction.

<ComponentPreview base="ink" name="dither-sparkline-variants" rows="13" />

API Reference [#api-reference]

| Prop               | Type                                                | Default      |
| ------------------ | --------------------------------------------------- | ------------ |
| `data`             | `number[]`                                          | required     |
| `color`            | `string`                                            | required     |
| `width`            | `number`                                            | `24`         |
| `height`           | `number`                                            | `4`          |
| `variant`          | `"gradient" \| "dotted" \| "hatched" \| "solid"`    | `"gradient"` |
| `markerIndex`      | `number \| null`                                    | `null`       |
| `animate`          | `boolean`                                           | `false`      |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`      |
| `noColor`          | `boolean`                                           | `false`      |
| `screenReaderMode` | `boolean`                                           | `false`      |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys or `h` / `j` / `k` / `l` move through the chart; `Enter` / `Space` select a point; `Escape` clears the active point; `r` restarts enabled animation.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Gauge

Arc/speedometer gauge meter



<ComponentPreview base="ink" name="gauge-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/gauge
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="gauge" title="components/ui/gauge.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Gauge } from "@/components/ui/gauge";
```

```tsx
<Gauge value={72} max={100} label="CPU Usage" size="md" />
```

API Reference [#api-reference]

Gauge [#gauge]

| Prop    | Type                   | Default    |
| ------- | ---------------------- | ---------- |
| `value` | `number`               | `required` |
| `min`   | `number`               | `0`        |
| `max`   | `number`               | `100`      |
| `label` | `string`               | -          |
| `color` | `string`               | -          |
| `size`  | `"sm" \| "md" \| "lg"` | `"md"`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Heat Map

Grid heatmap with color intensity scale



<ComponentPreview base="ink" name="heat-map-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/heat-map
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource base="ink" name="heat-map" title="components/ui/heat-map.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { HeatMap } from "@/components/ui/heat-map";
```

```tsx
<HeatMap
  data={[
    [1, 4, 7, 2],
    [3, 8, 5, 1],
  ]}
  rowLabels={["Mon", "Tue"]}
  colLabels={["Q1", "Q2", "Q3", "Q4"]}
  showValues
/>
```

API Reference [#api-reference]

HeatMap [#heatmap]

| Prop         | Type         | Default               |
| ------------ | ------------ | --------------------- |
| `data`       | `number[][]` | `required`            |
| `rowLabels`  | `string[]`   | -                     |
| `colLabels`  | `string[]`   | -                     |
| `colorScale` | `string[]`   | `DEFAULT_COLOR_SCALE` |
| `cellWidth`  | `number`     | `5`                   |
| `showValues` | `boolean`    | `false`               |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Charts

Components for rendering charts and data visualizations in the terminal.



Basic [#basic]

<ComponentsList className="mt-4" folderName="Charts" base="ink" category="basic" />

Dither [#dither]

<ComponentsList className="mt-4" folderName="Charts" base="ink" category="dither" />


# Line Chart

ASCII line chart with axes and multi-series support



<ComponentPreview base="ink" name="line-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/line-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/accessibility.ts" title="lib/accessibility.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="line-chart" title="components/ui/line-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { LineChart } from "@/components/ui/line-chart";
```

```tsx
<LineChart
  data={[
    { label: "Jan", value: 30 },
    { label: "Feb", value: 45 },
    { label: "Mar", value: 28 },
  ]}
  width={40}
  height={10}
  title="Monthly Sales"
/>
```

API Reference [#api-reference]

LineChart [#linechart]

| Prop       | Type                                              | Default    |
| ---------- | ------------------------------------------------- | ---------- |
| `data`     | `(number \| { label?: string; value: number })[]` | `required` |
| `width`    | `number`                                          | `40`       |
| `height`   | `number`                                          | `10`       |
| `title`    | `string`                                          | -          |
| `color`    | `string`                                          | -          |
| `showAxes` | `boolean`                                         | `true`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Pie Chart

Unicode block pie chart with legend



<ComponentPreview base="ink" name="pie-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/pie-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource base="ink" name="pie-chart" title="components/ui/pie-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { PieChart } from "@/components/ui/pie-chart";
```

```tsx
<PieChart
  data={[
    { label: "TypeScript", value: 45 },
    { label: "Rust", value: 25 },
    { label: "Go", value: 20 },
  ]}
  radius={6}
/>
```

API Reference [#api-reference]

PieChart [#piechart]

| Prop              | Type             | Default    |
| ----------------- | ---------------- | ---------- |
| `data`            | `PieChartItem[]` | `required` |
| `radius`          | `number`         | `5`        |
| `showLegend`      | `boolean`        | `true`     |
| `showPercentages` | `boolean`        | `true`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Sparkline

Inline Unicode braille sparkline chart



<ComponentPreview base="ink" name="sparkline-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/sparkline
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/accessibility.ts" title="lib/accessibility.ts" />

      <ComponentSource base="ink" name="sparkline" title="components/ui/sparkline.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Sparkline } from "@/components/ui/sparkline";
```

```tsx
<Sparkline data={[4, 8, 15, 16, 23, 42, 38, 26]} width={20} label="Requests" />
```

API Reference [#api-reference]

Sparkline [#sparkline]

| Prop    | Type       | Default    |
| ------- | ---------- | ---------- |
| `data`  | `number[]` | `required` |
| `width` | `number`   | `20`       |
| `color` | `string`   | -          |
| `label` | `string`   | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Bar Chart

Horizontal and vertical bar chart with labels



<ComponentPreview base="opentui" name="bar-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/bar-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="bar-chart" title="components/ui/bar-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { BarChart } from "@/components/ui/bar-chart";
```

```tsx
<BarChart
  data={[
    { label: "Mon", value: 12 },
    { label: "Tue", value: 28 },
  ]}
  width={40}
  showValues
  title="Weekly Traffic"
/>
```

API Reference [#api-reference]

BarChart [#barchart]

| Prop         | Type                         | Default        |
| ------------ | ---------------------------- | -------------- |
| `data`       | `BarChartItem[]`             | `required`     |
| `direction`  | `"horizontal" \| "vertical"` | `"horizontal"` |
| `width`      | `number`                     | `30`           |
| `height`     | `number`                     | `10`           |
| `showValues` | `boolean`                    | `true`         |
| `title`      | `string`                     | -              |


# Dither Area Chart

Composable dithered area charts with layered fills, dots, axes, stacking, bloom, and keyboard interaction



<ComponentPreview base="opentui" name="dither-area-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/dither-area-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/lib/dither-area-chart-utils.ts" title="lib/dither-area-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource base="opentui" name="dither-area-chart" title="components/ui/dither-area-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  Area,
  AreaChart,
  Grid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "@/components/ui/dither-area-chart";
import type { ChartConfig } from "@/components/ui/dither-area-chart";
```

```tsx
const data = [
  { month: "Jan", desktop: 38, mobile: 22 },
  { month: "Feb", desktop: 52, mobile: 31 },
  { month: "Mar", desktop: 47, mobile: 35 },
];

const config = {
  desktop: { color: "blue", label: "Desktop" },
  mobile: { color: "pink", label: "Mobile" },
} satisfies ChartConfig;

<AreaChart config={config} data={data} height={12} width={56}>
  <Grid horizontal />
  <XAxis dataKey="month" />
  <YAxis tickCount={4} />
  <Area dataKey="desktop" variant="gradient" />
  <Area dataKey="mobile" variant="dotted" />
  <Legend align="left" />
  <Tooltip labelKey="month" />
</AreaChart>;
```

Examples [#examples]

Fill variants [#fill-variants]

Set `variant` on each `Area` to choose a gradient, dotted, hatched, or solid fill.

<ComponentPreview base="opentui" name="dither-area-chart-variants" rows="17" />

Stacking modes [#stacking-modes]

Use `stackType="stacked"` for cumulative values or `stackType="percent"` for normalized proportions.

<ComponentPreview base="opentui" name="dither-area-chart-stacking" rows="10" />

API Reference [#api-reference]

| Prop               | Type                                                | Default     |
| ------------------ | --------------------------------------------------- | ----------- |
| `data`             | `TData[]`                                           | required    |
| `config`           | `ChartConfig`                                       | required    |
| `width`            | `number`                                            | `56`        |
| `height`           | `number`                                            | `12`        |
| `stackType`        | `"default" \| "stacked" \| "percent"`               | `"default"` |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`     |
| `markerIndex`      | `number \| null`                                    | `null`      |
| `interactive`      | `boolean`                                           | `true`      |
| `noColor`          | `boolean`                                           | `false`     |
| `screenReaderMode` | `boolean`                                           | `false`     |

Use left/right to inspect points, up/down to focus a series, Enter to select,
Escape to clear, and R to replay animation. H/J/K/L are supported too.


# Dither Bar Chart

Dithered grouped, stacked, and percent bar charts with terminal-native textures and interaction



<ComponentPreview base="opentui" name="dither-bar-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/dither-bar-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/lib/dither-bar-chart-utils.ts" title="lib/dither-bar-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource base="opentui" name="dither-bar-chart" title="components/ui/dither-bar-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  Bar,
  BarChart,
  Grid,
  Legend,
  Tooltip,
  XAxis,
  YAxis,
} from "@/components/ui/dither-bar-chart";
import type { ChartConfig } from "@/components/ui/dither-bar-chart";
```

```tsx
const data = [
  { month: "Jan", direct: 34, search: 18 },
  { month: "Feb", direct: 47, search: 24 },
  { month: "Mar", direct: 42, search: 29 },
];

const config = {
  direct: { color: "green", label: "Direct" },
  search: { color: "purple", label: "Search" },
} satisfies ChartConfig;

<BarChart config={config} data={data} stackType="stacked" width={56}>
  <Grid horizontal />
  <XAxis dataKey="month" />
  <YAxis tickCount={4} />
  <Bar dataKey="direct" variant="gradient" />
  <Bar dataKey="search" variant="hatched" />
  <Legend align="left" />
  <Tooltip labelKey="month" />
</BarChart>;
```

Examples [#examples]

Bar textures [#bar-textures]

Set `variant` on a `Bar` to render gradient, dotted, hatched, or solid cells.

<ComponentPreview base="opentui" name="dither-bar-chart-variants" rows="17" />

Stacking modes [#stacking-modes]

Switch between cumulative stacks and normalized percent stacks with `stackType`.

<ComponentPreview base="opentui" name="dither-bar-chart-stacking" rows="10" />

API Reference [#api-reference]

| Prop               | Type                                                | Default     |
| ------------------ | --------------------------------------------------- | ----------- |
| `data`             | `TData[]`                                           | required    |
| `config`           | `ChartConfig`                                       | required    |
| `width`            | `number`                                            | `56`        |
| `height`           | `number`                                            | `12`        |
| `stackType`        | `"default" \| "stacked" \| "percent"`               | `"default"` |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`     |
| `interactive`      | `boolean`                                           | `true`      |
| `noColor`          | `boolean`                                           | `false`     |
| `screenReaderMode` | `boolean`                                           | `false`     |

Arrow keys or H/J/K/L navigate chart state; Enter selects clickable series and
Escape clears the active point.


# Dither Line Chart

Dithered multi-series line charts with solid or dashed strokes, markers, axes, and terminal interaction



<ComponentPreview base="opentui" name="dither-line-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/dither-line-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/lib/dither-line-chart-utils.ts" title="lib/dither-line-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource base="opentui" name="dither-line-chart" title="components/ui/dither-line-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  ActiveDot,
  Dot,
  Grid,
  Line,
  LineChart,
  Tooltip,
  XAxis,
  YAxis,
} from "@/components/ui/dither-line-chart";
import type { ChartConfig } from "@/components/ui/dither-line-chart";
```

```tsx
const data = [
  { month: "Jan", latency: 24 },
  { month: "Feb", latency: 31 },
  { month: "Mar", latency: 27 },
];

const config = {
  latency: { color: "purple", label: "Latency" },
} satisfies ChartConfig;

<LineChart config={config} data={data} markerIndex={1} width={56}>
  <Grid horizontal />
  <XAxis dataKey="month" />
  <YAxis tickCount={4} />
  <Line dataKey="latency" strokeVariant="solid">
    <Dot variant="colored-border" />
    <ActiveDot variant="filled" />
  </Line>
  <Tooltip labelKey="month" />
</LineChart>;
```

Examples [#examples]

Stroke and marker variants [#stroke-and-marker-variants]

Use `strokeVariant` for solid or dashed lines. `Dot` and `ActiveDot` control regular and inspected markers independently.

<ComponentPreview base="opentui" name="dither-line-chart-variants" rows="10" />

API Reference [#api-reference]

| Prop               | Type                                                | Default  |
| ------------------ | --------------------------------------------------- | -------- |
| `data`             | `TData[]`                                           | required |
| `config`           | `ChartConfig`                                       | required |
| `width`            | `number`                                            | `56`     |
| `height`           | `number`                                            | `12`     |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`  |
| `markerIndex`      | `number \| null`                                    | `null`   |
| `interactive`      | `boolean`                                           | `true`   |
| `noColor`          | `boolean`                                           | `false`  |
| `screenReaderMode` | `boolean`                                           | `false`  |

Keyboard controls match the area chart: arrows or H/J/K/L navigate, Enter
selects a series, Escape clears, and R replays enabled motion.


# Dither Pie Chart

Dithered pie and donut charts with textured slices, legends, tooltips, and keyboard inspection



<ComponentPreview base="opentui" name="dither-pie-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/dither-pie-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/lib/dither-pie-chart-utils.ts" title="lib/dither-pie-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource base="opentui" name="dither-pie-chart" title="components/ui/dither-pie-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  Legend,
  Pie,
  PieChart,
  Tooltip,
} from "@/components/ui/dither-pie-chart";
import type { ChartConfig } from "@/components/ui/dither-pie-chart";
```

```tsx
const data = [
  { channel: "direct", value: 42 },
  { channel: "search", value: 31 },
  { channel: "social", value: 17 },
];

const config = {
  direct: { color: "blue", label: "Direct" },
  search: { color: "green", label: "Search" },
  social: { color: "pink", label: "Social" },
} satisfies ChartConfig;

<PieChart
  config={config}
  data={data}
  dataKey="value"
  innerRadius={0.42}
  nameKey="channel"
  width={46}
>
  <Pie variant="gradient" />
  <Legend align="left" />
  <Tooltip />
</PieChart>;
```

Examples [#examples]

Textures and donut shapes [#textures-and-donut-shapes]

All four fill variants work for pies and donuts. Set `innerRadius` between `0` and `0.92` to open the center.

<ComponentPreview base="opentui" name="dither-pie-chart-variants" rows="23" />

API Reference [#api-reference]

| Prop               | Type                        | Default  |
| ------------------ | --------------------------- | -------- |
| `data`             | `TData[]`                   | required |
| `config`           | `ChartConfig`               | required |
| `dataKey`          | `string`                    | required |
| `nameKey`          | `string`                    | required |
| `innerRadius`      | `number` from `0` to `0.92` | `0`      |
| `width`            | `number`                    | `56`     |
| `height`           | `number`                    | `12`     |
| `markerIndex`      | `number \| null`            | `null`   |
| `noColor`          | `boolean`                   | `false`  |
| `screenReaderMode` | `boolean`                   | `false`  |

Use left/right to inspect slices and up/down to focus legend entries.


# Dither Radar Chart

Dithered radar charts for comparing multiple series across terminal-friendly radial axes



<ComponentPreview base="opentui" name="dither-radar-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/dither-radar-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/lib/dither-radar-chart-utils.ts" title="lib/dither-radar-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource base="opentui" name="dither-radar-chart" title="components/ui/dither-radar-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import {
  Legend,
  Radar,
  RadarChart,
  Tooltip,
} from "@/components/ui/dither-radar-chart";
import type { ChartConfig } from "@/components/ui/dither-radar-chart";
```

```tsx
const data = [
  { metric: "Speed", desktop: 82, mobile: 68 },
  { metric: "Quality", desktop: 74, mobile: 79 },
  { metric: "Reach", desktop: 66, mobile: 88 },
  { metric: "Trust", desktop: 91, mobile: 72 },
];

const config = {
  desktop: { color: "blue", label: "Desktop" },
  mobile: { color: "pink", label: "Mobile" },
} satisfies ChartConfig;

<RadarChart config={config} data={data} nameKey="metric" width={52}>
  <Radar dataKey="desktop" variant="gradient" />
  <Radar dataKey="mobile" variant="dotted" />
  <Legend align="left" />
  <Tooltip labelKey="metric" />
</RadarChart>;
```

Examples [#examples]

Fill variants [#fill-variants]

Choose gradient, dotted, hatched, or solid polygon fills independently for each radar series.

<ComponentPreview base="opentui" name="dither-radar-chart-variants" rows="27" />

API Reference [#api-reference]

| Prop               | Type                                                | Default  |
| ------------------ | --------------------------------------------------- | -------- |
| `data`             | `TData[]`                                           | required |
| `config`           | `ChartConfig`                                       | required |
| `nameKey`          | `string`                                            | required |
| `width`            | `number`                                            | `56`     |
| `height`           | `number`                                            | `12`     |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`  |
| `markerIndex`      | `number \| null`                                    | `null`   |
| `noColor`          | `boolean`                                           | `false`  |
| `screenReaderMode` | `boolean`                                           | `false`  |

The standard chart keyboard controls inspect axes, focus series, and replay
enabled entrance motion.


# Dither Sparkline

Compact dithered sparklines for terminal dashboards, summaries, and inline metrics



<ComponentPreview base="opentui" name="dither-sparkline-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/dither-sparkline
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/lib/dither-chart-utils.ts" title="lib/dither-chart-utils.ts" />

      <ComponentSource src="registry/bases/opentui/lib/dither-sparkline-utils.ts" title="lib/dither-sparkline-utils.ts" />

      <ComponentSource src="registry/bases/opentui/ui/dither-chart.tsx" title="components/ui/dither-chart.tsx" />

      <ComponentSource base="opentui" name="dither-sparkline" title="components/ui/dither-sparkline.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Sparkline } from "@/components/ui/dither-sparkline";
```

```tsx
<Sparkline
  color="blue"
  data={[18, 26, 23, 41, 37, 52, 49, 63]}
  height={4}
  markerIndex={5}
  title="Requests"
  variant="gradient"
  width={28}
/>
```

Examples [#examples]

Fill and marker variants [#fill-and-marker-variants]

Sparklines support every dither fill. Add `markerIndex` to highlight a specific sample without enabling interaction.

<ComponentPreview base="opentui" name="dither-sparkline-variants" rows="13" />

API Reference [#api-reference]

| Prop               | Type                                                | Default      |
| ------------------ | --------------------------------------------------- | ------------ |
| `data`             | `number[]`                                          | required     |
| `color`            | `string`                                            | required     |
| `width`            | `number`                                            | `24`         |
| `height`           | `number`                                            | `4`          |
| `variant`          | `"gradient" \| "dotted" \| "hatched" \| "solid"`    | `"gradient"` |
| `markerIndex`      | `number \| null`                                    | `null`       |
| `animate`          | `boolean`                                           | `false`      |
| `bloom`            | `"off" \| "low" \| "high" \| "aura" \| BloomConfig` | `"off"`      |
| `noColor`          | `boolean`                                           | `false`      |
| `screenReaderMode` | `boolean`                                           | `false`      |


# Gauge

Arc/speedometer gauge meter



<ComponentPreview base="opentui" name="gauge-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/gauge
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="gauge" title="components/ui/gauge.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Gauge } from "@/components/ui/gauge";
```

```tsx
<Gauge value={72} max={100} label="CPU Usage" size="md" />
```

API Reference [#api-reference]

Gauge [#gauge]

| Prop    | Type                   | Default    |
| ------- | ---------------------- | ---------- |
| `value` | `number`               | `required` |
| `min`   | `number`               | `0`        |
| `max`   | `number`               | `100`      |
| `label` | `string`               | -          |
| `color` | `string`               | -          |
| `size`  | `"sm" \| "md" \| "lg"` | `"md"`     |


# Heat Map

Grid heatmap with color intensity scale



<ComponentPreview base="opentui" name="heat-map-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/heat-map
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="heat-map" title="components/ui/heat-map.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { HeatMap } from "@/components/ui/heat-map";
```

```tsx
<HeatMap
  data={[
    [1, 4, 7, 2],
    [3, 8, 5, 1],
  ]}
  rowLabels={["Mon", "Tue"]}
  colLabels={["Q1", "Q2", "Q3", "Q4"]}
  showValues
/>
```

API Reference [#api-reference]

HeatMap [#heatmap]

| Prop         | Type         | Default               |
| ------------ | ------------ | --------------------- |
| `data`       | `number[][]` | `required`            |
| `rowLabels`  | `string[]`   | -                     |
| `colLabels`  | `string[]`   | -                     |
| `colorScale` | `string[]`   | `DEFAULT_COLOR_SCALE` |
| `cellWidth`  | `number`     | `5`                   |
| `showValues` | `boolean`    | `false`               |


# Charts

Components for rendering charts and data visualizations in the terminal.



Basic [#basic]

<ComponentsList className="mt-4" folderName="Charts" base="opentui" category="basic" />

Dither [#dither]

<ComponentsList className="mt-4" folderName="Charts" base="opentui" category="dither" />


# Line Chart

ASCII line chart with axes and multi-series support



<ComponentPreview base="opentui" name="line-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/line-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="line-chart" title="components/ui/line-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { LineChart } from "@/components/ui/line-chart";
```

```tsx
<LineChart
  data={[
    { label: "Jan", value: 30 },
    { label: "Feb", value: 45 },
    { label: "Mar", value: 28 },
  ]}
  width={40}
  height={10}
  title="Monthly Sales"
/>
```

API Reference [#api-reference]

LineChart [#linechart]

| Prop       | Type                                              | Default    |
| ---------- | ------------------------------------------------- | ---------- |
| `data`     | `(number \| { label?: string; value: number })[]` | `required` |
| `width`    | `number`                                          | `40`       |
| `height`   | `number`                                          | `10`       |
| `title`    | `string`                                          | -          |
| `color`    | `string`                                          | -          |
| `showAxes` | `boolean`                                         | `true`     |


# Pie Chart

Unicode block pie chart with legend



<ComponentPreview base="opentui" name="pie-chart-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/pie-chart
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="pie-chart" title="components/ui/pie-chart.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { PieChart } from "@/components/ui/pie-chart";
```

```tsx
<PieChart
  data={[
    { label: "TypeScript", value: 45 },
    { label: "Rust", value: 25 },
    { label: "Go", value: 20 },
  ]}
  radius={6}
/>
```

API Reference [#api-reference]

PieChart [#piechart]

| Prop              | Type             | Default    |
| ----------------- | ---------------- | ---------- |
| `data`            | `PieChartItem[]` | `required` |
| `radius`          | `number`         | `5`        |
| `showLegend`      | `boolean`        | `true`     |
| `showPercentages` | `boolean`        | `true`     |


# Sparkline

Inline Unicode braille sparkline chart



<ComponentPreview base="opentui" name="sparkline-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/sparkline
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="sparkline" title="components/ui/sparkline.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Sparkline } from "@/components/ui/sparkline";
```

```tsx
<Sparkline data={[4, 8, 15, 16, 23, 42, 38, 26]} width={20} label="Requests" />
```

API Reference [#api-reference]

Sparkline [#sparkline]

| Prop    | Type       | Default    |
| ------- | ---------- | ---------- |
| `data`  | `number[]` | `required` |
| `width` | `number`   | `20`       |
| `color` | `string`   | -          |
| `label` | `string`   | -          |


# Ink

React-powered terminal components rendered with Ink.



Layout [#layout]

<ComponentsList className="mt-4" base="ink" category="layout" />

Typography [#typography]

<ComponentsList className="mt-4" base="ink" category="typography" />

Input [#input]

<ComponentsList className="mt-4" base="ink" category="input" />

Selection [#selection]

<ComponentsList className="mt-4" base="ink" category="selection" />

Data [#data]

<ComponentsList className="mt-4" base="ink" category="data" />

Feedback [#feedback]

<ComponentsList className="mt-4" base="ink" category="feedback" />

Navigation [#navigation]

<ComponentsList className="mt-4" base="ink" category="navigation" />

Overlays [#overlays]

<ComponentsList className="mt-4" base="ink" category="overlays" />

Forms [#forms]

<ComponentsList className="mt-4" base="ink" category="forms" />

Utility [#utility]

<ComponentsList className="mt-4" base="ink" category="utility" />

AI [#ai]

<ComponentsList className="mt-4" base="ink" category="ai" />


# OpenTUI

OpenTUI React components for building terminal user interfaces.



Layout [#layout]

<ComponentsList className="mt-4" base="opentui" category="layout" />

Typography [#typography]

<ComponentsList className="mt-4" base="opentui" category="typography" />

Input [#input]

<ComponentsList className="mt-4" base="opentui" category="input" />

Selection [#selection]

<ComponentsList className="mt-4" base="opentui" category="selection" />

Data [#data]

<ComponentsList className="mt-4" base="opentui" category="data" />

Feedback [#feedback]

<ComponentsList className="mt-4" base="opentui" category="feedback" />

Navigation [#navigation]

<ComponentsList className="mt-4" base="opentui" category="navigation" />

Overlays [#overlays]

<ComponentsList className="mt-4" base="opentui" category="overlays" />

Forms [#forms]

<ComponentsList className="mt-4" base="opentui" category="forms" />

Utility [#utility]

<ComponentsList className="mt-4" base="opentui" category="utility" />

AI [#ai]

<ComponentsList className="mt-4" base="opentui" category="ai" />


# App Shell

Full-screen TUI layout with header, tip bar, full-width input, scrollable content, and hints footer



<ComponentPreview base="ink" name="app-shell-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/app-shell
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="app-shell" title="components/ui/app-shell.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { AppShell } from "@/components/ui/app-shell";
```

```tsx
<AppShell>
  <AppShell.Header>
    <AppShell.Tip>
      Press Tab to move between the command input and output
    </AppShell.Tip>
  </AppShell.Header>
  <AppShell.Input
    autoFocus
    placeholder="Enter a command..."
    prefix="$"
    onSubmit={(value) => console.log(value)}
  />
  <AppShell.Content height={16}></AppShell.Content>
  <AppShell.Hints items={["tab focus", "enter submit", "↑↓ scroll"]} />
</AppShell>
```

API Reference [#api-reference]

AppShell [#appshell]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `children`   | `ReactNode` | `required` |
| `fullscreen` | `boolean`   | -          |

AppShell.Header [#appshellheader]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

AppShell.Tip [#appshelltip]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

AppShell.Input [#appshellinput]

| Prop            | Type                                        | Default               |
| --------------- | ------------------------------------------- | --------------------- |
| `value`         | `string`                                    | -                     |
| `defaultValue`  | `string`                                    | `""`                  |
| `onValueChange` | `(value: string) => void`                   | -                     |
| `onChange`      | `(value: string) => void`                   | -                     |
| `onSubmit`      | `(value: string) => void`                   | -                     |
| `placeholder`   | `string`                                    | `"Type something..."` |
| `borderStyle`   | `"single" \| "double" \| "round" \| "bold"` | `"single"`            |
| `borderColor`   | `string`                                    | -                     |
| `prefix`        | `string`                                    | `">"`                 |
| `readOnly`      | `boolean`                                   | `false`               |
| `required`      | `boolean`                                   | `false`               |
| `cursorOrigin`  | `{x: number; y: number}`                    | -                     |
| `id`            | `string`                                    | generated             |
| `autoFocus`     | `boolean`                                   | `false`               |
| `isActive`      | `boolean`                                   | `true`                |
| `disabled`      | `boolean`                                   | `false`               |

AppShell.Content [#appshellcontent]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `children`   | `ReactNode` | `required` |
| `autoscroll` | `boolean`   | -          |
| `height`     | `number`    | `20`       |

AppShell.Hints [#appshellhints]

| Prop       | Type        | Default |
| ---------- | ----------- | ------- |
| `items`    | `string[]`  | -       |
| `children` | `ReactNode` | -       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Bullet List

Nested structured content with ●/└/□ bullet prefixes



<ComponentPreview base="ink" name="bullet-list-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/bullet-list
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="bullet-list" title="components/ui/bullet-list.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { BulletList } from "@/components/ui/bullet-list";
```

```tsx
<BulletList>
  <BulletList.Item label="Install dependencies" bold>
    <BulletList.Sub>
      <BulletList.TreeItem label="ink@5.1.0" />
      <BulletList.TreeItem label="react@18.3.0" />
    </BulletList.Sub>
  </BulletList.Item>
  <BulletList.Item label="Configure project" />
  <BulletList.CheckItem label="Write tests" done />
  <BulletList.CheckItem label="Deploy to production" />
</BulletList>
```

API Reference [#api-reference]

BulletList [#bulletlist]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

BulletList.Item [#bulletlistitem]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `label`    | `string`    | `required` |
| `bold`     | `boolean`   | `false`    |
| `color`    | `string`    | -          |
| `children` | `ReactNode` | -          |

BulletList.Sub [#bulletlistsub]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

BulletList.TreeItem [#bulletlisttreeitem]

| Prop    | Type     | Default    |
| ------- | -------- | ---------- |
| `label` | `string` | `required` |
| `color` | `string` | -          |

BulletList.CheckItem [#bulletlistcheckitem]

| Prop    | Type      | Default    |
| ------- | --------- | ---------- |
| `label` | `string`  | `required` |
| `done`  | `boolean` | `false`    |
| `color` | `string`  | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Help Screen

Figlet banner + tagline + aligned Options/Commands help sections



<ComponentPreview base="ink" name="help-screen-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/help-screen
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource base="ink" name="help-screen" title="components/ui/help-screen.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { HelpScreen } from "@/components/ui/help-screen";
```

```tsx
<HelpScreen
  title="mycli"
  tagline="A blazing-fast task runner"
  usage="mycli <command> [options]"
>
  <HelpScreen.Section label="Commands">
    <HelpScreen.Row flag="init" description="Create a new project" />
    <HelpScreen.Row flag="build" description="Compile the source files" />
    <HelpScreen.Row flag="test" description="Run the test suite" />
  </HelpScreen.Section>
  <HelpScreen.Section label="Options">
    <HelpScreen.Row flag="--help, -h" description="Show this help message" />
    <HelpScreen.Row flag="--version, -v" description="Print version number" />
    <HelpScreen.Row flag="--verbose" description="Enable verbose logging" />
  </HelpScreen.Section>
</HelpScreen>
```

API Reference [#api-reference]

HelpScreen [#helpscreen]

| Prop          | Type                                       | Default    |
| ------------- | ------------------------------------------ | ---------- |
| `title`       | `string`                                   | `required` |
| `font`        | `"block" \| "simple" \| "shade" \| "slim"` | `"block"`  |
| `titleColor`  | `string`                                   | -          |
| `tagline`     | `string`                                   | -          |
| `usage`       | `string`                                   | -          |
| `description` | `string`                                   | -          |
| `columnGap`   | `number`                                   | `4`        |
| `flagWidth`   | `number`                                   | -          |
| `children`    | `ReactNode`                                | `required` |

HelpScreen.Section [#helpscreensection]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `label`      | `string`    | `required` |
| `labelColor` | `string`    | -          |
| `children`   | `ReactNode` | `required` |

HelpScreen.Row [#helpscreenrow]

| Prop               | Type     | Default    |
| ------------------ | -------- | ---------- |
| `flag`             | `string` | `required` |
| `description`      | `string` | `required` |
| `flagColor`        | `string` | -          |
| `descriptionColor` | `string` | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Ink Templates

Pre-built terminal UI templates for Ink framework.



<ComponentsList folderName="Templates" base="ink" />


# Info Box

Bordered info panel with header, key-value rows, and tree-prefix rows



<ComponentPreview base="ink" name="info-box-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/info-box
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="info-box" title="components/ui/info-box.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { InfoBox } from "@/components/ui/info-box";
```

```tsx
<InfoBox borderStyle="round" width={40}>
  <InfoBox.Header icon="📦" label="my-package" version="v2.4.1" />
  <InfoBox.Row label="License" value="MIT" />
  <InfoBox.Row label="Engine" value="node" valueDetail=">=18.0.0" />
  <InfoBox.TreeRow label="Platform" value="darwin-arm64" />
</InfoBox>
```

API Reference [#api-reference]

InfoBox [#infobox]

| Prop          | Type                                        | Default    |
| ------------- | ------------------------------------------- | ---------- |
| `borderStyle` | `"single" \| "round" \| "double" \| "bold"` | `"single"` |
| `borderColor` | `string`                                    | -          |
| `padding`     | `[number, number]`                          | `[0, 1]`   |
| `width`       | `number \| "full"`                          | -          |
| `children`    | `ReactNode`                                 | `required` |

InfoBox.Header [#infoboxheader]

| Prop           | Type     | Default    |
| -------------- | -------- | ---------- |
| `icon`         | `string` | -          |
| `iconColor`    | `string` | `"green"`  |
| `label`        | `string` | `required` |
| `description`  | `string` | -          |
| `version`      | `string` | -          |
| `versionColor` | `string` | `"cyan"`   |

InfoBox.Row [#infoboxrow]

| Prop          | Type      | Default    |
| ------------- | --------- | ---------- |
| `label`       | `string`  | `required` |
| `value`       | `string`  | -          |
| `valueDetail` | `string`  | -          |
| `valueColor`  | `string`  | -          |
| `bold`        | `boolean` | `false`    |
| `tree`        | `boolean` | `false`    |
| `color`       | `string`  | -          |

InfoBox.TreeRow [#infoboxtreerow]

Same props as `InfoBox.Row` except `tree` is always `true`.

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Login Flow

Full-page onboarding/login screen with announcement banner, big ASCII title, description, and numbered select



<ComponentPreview base="ink" name="login-flow-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/login-flow
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="login-flow" title="components/ui/login-flow.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { LoginFlow } from "@/components/ui/login-flow";
```

```tsx
<LoginFlow title="Acme CLI" padding={2}>
  <LoginFlow.Announcement icon="🎉">
    Version 3.0 is now available!
  </LoginFlow.Announcement>
  <LoginFlow.Description>
    Sign in to access your workspace.
  </LoginFlow.Description>
  <LoginFlow.Select
    label="Choose a login method:"
    options={["GitHub", "Google SSO", "Email & Password"]}
    onSelect={(index) => console.log("selected", index)}
  />
</LoginFlow>
```

API Reference [#api-reference]

LoginFlow [#loginflow]

| Prop         | Type                                       | Default    |
| ------------ | ------------------------------------------ | ---------- |
| `title`      | `string`                                   | -          |
| `titleFont`  | `"block" \| "simple" \| "shade" \| "slim"` | `"block"`  |
| `titleColor` | `string`                                   | -          |
| `padding`    | `number`                                   | `2`        |
| `onSelect`   | `(index: number) => void`                  | -          |
| `children`   | `ReactNode`                                | `required` |

LoginFlow.Announcement [#loginflowannouncement]

| Prop          | Type                                        | Default    |
| ------------- | ------------------------------------------- | ---------- |
| `icon`        | `string`                                    | `"*"`      |
| `iconColor`   | `string`                                    | -          |
| `borderStyle` | `"single" \| "round" \| "double" \| "bold"` | `"single"` |
| `borderColor` | `string`                                    | -          |
| `children`    | `ReactNode`                                 | `required` |

LoginFlow.Description [#loginflowdescription]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `bold`     | `boolean`   | `false`    |
| `dim`      | `boolean`   | `false`    |
| `color`    | `string`    | -          |
| `children` | `ReactNode` | `required` |

LoginFlow.Select [#loginflowselect]

| Prop           | Type                      | Default    |
| -------------- | ------------------------- | ---------- |
| `label`        | `string`                  | -          |
| `labelBold`    | `boolean`                 | `false`    |
| `options`      | `string[]`                | `required` |
| `activeIndex`  | `number`                  | -          |
| `defaultIndex` | `number`                  | `0`        |
| `cursor`       | `string`                  | `"›"`      |
| `cursorColor`  | `string`                  | `"cyan"`   |
| `activeColor`  | `string`                  | `"cyan"`   |
| `onSelect`     | `(index: number) => void` | `required` |
| `keyboardNav`  | `boolean`                 | `true`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Setup Flow

@clack-style step flow with ◇/◆/│ visual language, badge, info steps, and multi-select



<ComponentPreview base="ink" name="setup-flow-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/setup-flow
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-animation.ts" title="hooks/use-animation.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="setup-flow" title="components/ui/setup-flow.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { SetupFlow } from "@/components/ui/setup-flow";
```

```tsx
<SetupFlow title="create-app">
  <SetupFlow.Badge label="v1.0.0" />
  <SetupFlow.Step status="done">Project name set to my-app</SetupFlow.Step>
  <SetupFlow.Step status="done">Template selected: React</SetupFlow.Step>
  <SetupFlow.Step status="active">Installing dependencies...</SetupFlow.Step>
  <SetupFlow.MultiSelect
    label="Select features"
    hint="space to toggle, enter to confirm"
    options={[
      { value: "ts", label: "TypeScript" },
      { value: "eslint", label: "ESLint", description: "Code linting" },
      { value: "prettier", label: "Prettier", description: "Formatting" },
    ]}
    onSubmit={(values) => console.log(values)}
  />
</SetupFlow>
```

API Reference [#api-reference]

SetupFlow [#setupflow]

| Prop             | Type                                       | Default     |
| ---------------- | ------------------------------------------ | ----------- |
| `title`          | `string`                                   | -           |
| `titleFont`      | `"block" \| "simple" \| "shade" \| "slim"` | `"block"`   |
| `titleColor`     | `string`                                   | `"#888888"` |
| `titleColorAlt`  | `string`                                   | -           |
| `connectorChar`  | `string`                                   | `"│"`       |
| `connectorColor` | `string`                                   | -           |
| `children`       | `ReactNode`                                | `required`  |

SetupFlow.Badge [#setupflowbadge]

| Prop    | Type     | Default    |
| ------- | -------- | ---------- |
| `label` | `string` | `required` |
| `bg`    | `string` | `"cyan"`   |
| `color` | `string` | `"black"`  |

SetupFlow.Step [#setupflowstep]

| Prop        | Type                                                      | Default    |
| ----------- | --------------------------------------------------------- | ---------- |
| `icon`      | `string`                                                  | -          |
| `iconColor` | `string`                                                  | -          |
| `status`    | `"done" \| "active" \| "pending" \| "success" \| "error"` | `"done"`   |
| `children`  | `ReactNode`                                               | `required` |

SetupFlow.Spinner [#setupflowspinner]

| Prop         | Type         | Default    |
| ------------ | ------------ | ---------- |
| `label`      | `string`     | `required` |
| `onComplete` | `() => void` | -          |

SetupFlow.MultiSelect [#setupflowmultiselect]

| Prop            | Type                                                       | Default    |
| --------------- | ---------------------------------------------------------- | ---------- |
| `label`         | `string`                                                   | `required` |
| `hint`          | `string`                                                   | -          |
| `options`       | `{ value: string; label: string; description?: string }[]` | `required` |
| `values`        | `string[]`                                                 | -          |
| `onChange`      | `(values: string[]) => void`                               | -          |
| `onSubmit`      | `(values: string[]) => void`                               | -          |
| `checkedChar`   | `string`                                                   | `"■"`      |
| `uncheckedChar` | `string`                                                   | `"□"`      |
| `checkedColor`  | `string`                                                   | `"green"`  |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Splash Screen

Styled startup banner with big ASCII art title, subtitle, author credit, and status line



<ComponentPreview base="ink" name="splash-screen-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/splash-screen
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource base="ink" name="splash-screen" title="components/ui/splash-screen.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { SplashScreen } from "@/components/ui/splash-screen";
```

```tsx
<SplashScreen
  title="MyCLI"
  subtitle="The modern developer toolkit"
  author={{ name: "Jane Doe", href: "https://example.com" }}
  statusLine={<Text color="green">● Ready on port 3000</Text>}
/>
```

API Reference [#api-reference]

SplashScreen [#splashscreen]

| Prop            | Type                              | Default    |
| --------------- | --------------------------------- | ---------- |
| `title`         | `string`                          | `required` |
| `font`          | `"block" \| "simple"`             | `"block"`  |
| `titleColor`    | `string`                          | -          |
| `titleColorAlt` | `string`                          | -          |
| `bold`          | `boolean`                         | `true`     |
| `subtitle`      | `string`                          | -          |
| `subtitleDim`   | `boolean`                         | `true`     |
| `author`        | `{ name: string; href?: string }` | -          |
| `statusLine`    | `ReactNode`                       | -          |
| `padding`       | `number`                          | `2`        |
| `align`         | `"left" \| "center"`              | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Usage Monitor

Real-time dashboard with diamond header, progress metrics, burn rate, predictions, and status bar



<ComponentPreview base="ink" name="usage-monitor-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/usage-monitor
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interval.ts" title="hooks/use-interval.ts" />

      <ComponentSource base="ink" name="usage-monitor" title="components/ui/usage-monitor.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { UsageMonitor } from "@/components/ui/usage-monitor";
```

```tsx
<UsageMonitor refreshInterval={2000}>
  <UsageMonitor.Header title="API Usage Dashboard" />
  <UsageMonitor.Tags items={["Pro Plan", "Billing: Monthly", "US-East"]} />
  <UsageMonitor.Section icon="📊" title="Requests">
    <UsageMonitor.Metric
      label="API Calls"
      value={8420}
      max={10000}
      percent={84.2}
      status="yellow"
      format="number"
    />
  </UsageMonitor.Section>
  <UsageMonitor.Stats>
    <UsageMonitor.StatRow label="Avg Latency" value="142ms" />
    <UsageMonitor.StatRow label="Error Rate" value="0.3%" valueColor="green" />
  </UsageMonitor.Stats>
  <UsageMonitor.StatusBar clock sessionLabel="dashboard" exitHint="q to quit" />
</UsageMonitor>
```

API Reference [#api-reference]

UsageMonitor [#usagemonitor]

| Prop              | Type        | Default    |
| ----------------- | ----------- | ---------- |
| `refreshInterval` | `number`    | `1000`     |
| `separatorChar`   | `string`    | `"─"`      |
| `children`        | `ReactNode` | `required` |

UsageMonitor.Header [#usagemonitorheader]

| Prop             | Type     | Default     |
| ---------------- | -------- | ----------- |
| `title`          | `string` | `required`  |
| `titleColor`     | `string` | `"cyan"`    |
| `decorator`      | `string` | `"◆ ✦ ◆ ✦"` |
| `separatorChar`  | `string` | `"═"`       |
| `separatorColor` | `string` | -           |

UsageMonitor.Tags [#usagemonitortags]

| Prop             | Type       | Default    |
| ---------------- | ---------- | ---------- |
| `items`          | `string[]` | `required` |
| `bracketColor`   | `string`   | `"cyan"`   |
| `separatorColor` | `string`   | `"cyan"`   |

UsageMonitor.Section [#usagemonitorsection]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `icon`     | `string`    | -          |
| `title`    | `string`    | -          |
| `subtitle` | `string`    | -          |
| `children` | `ReactNode` | `required` |

UsageMonitor.Metric [#usagemonitormetric]

| Prop           | Type                                                            | Default    |
| -------------- | --------------------------------------------------------------- | ---------- |
| `icon`         | `string`                                                        | -          |
| `label`        | `string`                                                        | `required` |
| `value`        | `number`                                                        | `required` |
| `max`          | `number`                                                        | `required` |
| `percent`      | `number`                                                        | `required` |
| `status`       | `"green" \| "yellow" \| "red" \| "blue"`                        | `required` |
| `format`       | `"number" \| "currency" \| "duration" \| "percent" \| "custom"` | `required` |
| `formatFn`     | `(v: number, max: number) => string`                            | -          |
| `barWidth`     | `number`                                                        | `22`       |
| `barFillChar`  | `string`                                                        | `"█"`      |
| `barEmptyChar` | `string`                                                        | `"░"`      |
| `barColor`     | `string`                                                        | `"white"`  |
| `maxDim`       | `boolean`                                                       | `false`    |
| `showMax`      | `boolean`                                                       | `true`     |

UsageMonitor.DistributionMetric [#usagemonitordistributionmetric]

| Prop       | Type                                                   | Default    |
| ---------- | ------------------------------------------------------ | ---------- |
| `icon`     | `string`                                               | -          |
| `label`    | `string`                                               | `required` |
| `segments` | `{ label: string; percent: number; color?: string }[]` | `required` |
| `barWidth` | `number`                                               | `22`       |

UsageMonitor.Stats [#usagemonitorstats]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

UsageMonitor.StatRow [#usagemonitorstatrow]

| Prop          | Type     | Default    |
| ------------- | -------- | ---------- |
| `icon`        | `string` | -          |
| `label`       | `string` | `required` |
| `value`       | `string` | `required` |
| `valueSuffix` | `string` | -          |
| `valueColor`  | `string` | `"white"`  |

UsageMonitor.Predictions [#usagemonitorpredictions]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

UsageMonitor.Prediction [#usagemonitorprediction]

| Prop         | Type     | Default    |
| ------------ | -------- | ---------- |
| `label`      | `string` | `required` |
| `value`      | `string` | `required` |
| `valueColor` | `string` | `"yellow"` |

UsageMonitor.StatusBar [#usagemonitorstatusbar]

| Prop           | Type                           | Default   |
| -------------- | ------------------------------ | --------- |
| `clock`        | `boolean`                      | `false`   |
| `clockColor`   | `string`                       | `"cyan"`  |
| `sessionLabel` | `string`                       | -         |
| `sessionColor` | `string`                       | `"green"` |
| `exitHint`     | `string`                       | -         |
| `statusDot`    | `"green" \| "yellow" \| "red"` | `"green"` |
| `separator`    | `string`                       | `" \| "`  |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Welcome Screen

Two-panel welcome dashboard with titled border, logo, greeting, and sections



<ComponentPreview base="ink" name="welcome-screen-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/welcome-screen
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="welcome-screen" title="components/ui/welcome-screen.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { WelcomeScreen } from "@/components/ui/welcome-screen";
```

```tsx
<WelcomeScreen appName="DevTool" version="v2.1.0" borderStyle="round">
  <WelcomeScreen.Left>
    <WelcomeScreen.Logo>{"  ╔══╗\n  ║DT║\n  ╚══╝"}</WelcomeScreen.Logo>
    <WelcomeScreen.Greeting>Welcome back, developer!</WelcomeScreen.Greeting>
    <WelcomeScreen.Meta items={["Node 20.x", "TypeScript 5.4", "macOS"]} dim />
  </WelcomeScreen.Left>
  <WelcomeScreen.Right>
    <WelcomeScreen.Section title="Quick Start">
      Run `devtool init` to scaffold a new project.
    </WelcomeScreen.Section>
    <WelcomeScreen.Section title="Recent Projects">
      my-app, api-server, dashboard
    </WelcomeScreen.Section>
  </WelcomeScreen.Right>
</WelcomeScreen>
```

API Reference [#api-reference]

WelcomeScreen [#welcomescreen]

| Prop           | Type                                        | Default    |
| -------------- | ------------------------------------------- | ---------- |
| `appName`      | `string`                                    | `required` |
| `appNameColor` | `string`                                    | -          |
| `version`      | `string`                                    | -          |
| `borderColor`  | `string`                                    | -          |
| `borderStyle`  | `"single" \| "round" \| "double" \| "bold"` | `"single"` |
| `leftWidth`    | `number`                                    | `26`       |
| `children`     | `ReactNode`                                 | `required` |

WelcomeScreen.Left [#welcomescreenleft]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

WelcomeScreen.Right [#welcomescreenright]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

WelcomeScreen.Greeting [#welcomescreengreeting]

| Prop       | Type                 | Default    |
| ---------- | -------------------- | ---------- |
| `children` | `ReactNode`          | `required` |
| `bold`     | `boolean`            | `true`     |
| `align`    | `"left" \| "center"` | `"left"`   |
| `color`    | `string`             | -          |

WelcomeScreen.Logo [#welcomescreenlogo]

| Prop       | Type                 | Default    |
| ---------- | -------------------- | ---------- |
| `children` | `ReactNode`          | `required` |
| `align`    | `"left" \| "center"` | `"left"`   |

WelcomeScreen.Meta [#welcomescreenmeta]

| Prop        | Type                 | Default    |
| ----------- | -------------------- | ---------- |
| `items`     | `string[]`           | `required` |
| `separator` | `string`             | `" · "`    |
| `align`     | `"left" \| "center"` | `"center"` |
| `dim`       | `boolean`            | `false`    |
| `color`     | `string`             | -          |
| `stack`     | `boolean`            | `false`    |

WelcomeScreen.Section [#welcomescreensection]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `title`      | `string`    | `required` |
| `titleColor` | `string`    | -          |
| `titleBold`  | `boolean`   | `true`     |
| `children`   | `ReactNode` | `required` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# App Shell

Full-screen TUI layout with header, tip bar, full-width input, scrollable content, and hints footer



<ComponentPreview base="opentui" name="app-shell-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/app-shell
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="app-shell" title="components/ui/app-shell.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { AppShell } from "@/components/ui/app-shell";
```

```tsx
<AppShell>
  <AppShell.Header>
    <AppShell.Tip>Press Tab to autocomplete commands</AppShell.Tip>
  </AppShell.Header>
  <AppShell.Input
    placeholder="Enter a command..."
    prefix="$"
    onSubmit={(value) => console.log(value)}
  />
  <AppShell.Content height={16}></AppShell.Content>
  <AppShell.Hints items={["↑↓ scroll", "enter submit", "esc quit"]} />
</AppShell>
```

API Reference [#api-reference]

AppShell [#appshell]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `children`   | `ReactNode` | `required` |
| `fullscreen` | `boolean`   | -          |

AppShell.Header [#appshellheader]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

AppShell.Tip [#appshelltip]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

AppShell.Input [#appshellinput]

| Prop          | Type                                        | Default               |
| ------------- | ------------------------------------------- | --------------------- |
| `value`       | `string`                                    | -                     |
| `onChange`    | `(value: string) => void`                   | -                     |
| `onSubmit`    | `(value: string) => void`                   | -                     |
| `placeholder` | `string`                                    | `"Type something..."` |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold"` | `"single"`            |
| `borderColor` | `string`                                    | -                     |
| `prefix`      | `string`                                    | `">"`                 |

AppShell.Content [#appshellcontent]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `children`   | `ReactNode` | `required` |
| `autoscroll` | `boolean`   | -          |
| `height`     | `number`    | `20`       |

AppShell.Hints [#appshellhints]

| Prop       | Type        | Default |
| ---------- | ----------- | ------- |
| `items`    | `string[]`  | -       |
| `children` | `ReactNode` | -       |


# Bullet List

Nested structured content with ●/└/□ bullet prefixes



<ComponentPreview base="opentui" name="bullet-list-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/bullet-list
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="bullet-list" title="components/ui/bullet-list.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { BulletList } from "@/components/ui/bullet-list";
```

```tsx
<BulletList>
  <BulletList.Item label="Install dependencies" bold>
    <BulletList.Sub>
      <BulletList.TreeItem label="opentui@5.1.0" />
      <BulletList.TreeItem label="react@18.3.0" />
    </BulletList.Sub>
  </BulletList.Item>
  <BulletList.Item label="Configure project" />
  <BulletList.CheckItem label="Write tests" done />
  <BulletList.CheckItem label="Deploy to production" />
</BulletList>
```

API Reference [#api-reference]

BulletList [#bulletlist]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

BulletList.Item [#bulletlistitem]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `label`    | `string`    | `required` |
| `bold`     | `boolean`   | `false`    |
| `color`    | `string`    | -          |
| `children` | `ReactNode` | -          |

BulletList.Sub [#bulletlistsub]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

BulletList.TreeItem [#bulletlisttreeitem]

| Prop    | Type     | Default    |
| ------- | -------- | ---------- |
| `label` | `string` | `required` |
| `color` | `string` | -          |

BulletList.CheckItem [#bulletlistcheckitem]

| Prop    | Type      | Default    |
| ------- | --------- | ---------- |
| `label` | `string`  | `required` |
| `done`  | `boolean` | `false`    |
| `color` | `string`  | -          |


# Help Screen

Figlet banner + tagline + aligned Options/Commands help sections



<ComponentPreview base="opentui" name="help-screen-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/help-screen
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="help-screen" title="components/ui/help-screen.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { HelpScreen } from "@/components/ui/help-screen";
```

```tsx
<HelpScreen
  title="mycli"
  tagline="A blazing-fast task runner"
  usage="mycli <command> [options]"
>
  <HelpScreen.Section label="Commands">
    <HelpScreen.Row flag="init" description="Create a new project" />
    <HelpScreen.Row flag="build" description="Compile the source files" />
    <HelpScreen.Row flag="test" description="Run the test suite" />
  </HelpScreen.Section>
  <HelpScreen.Section label="Options">
    <HelpScreen.Row flag="--help, -h" description="Show this help message" />
    <HelpScreen.Row flag="--version, -v" description="Print version number" />
    <HelpScreen.Row flag="--verbose" description="Enable verbose logging" />
  </HelpScreen.Section>
</HelpScreen>
```

API Reference [#api-reference]

HelpScreen [#helpscreen]

| Prop          | Type                                       | Default    |
| ------------- | ------------------------------------------ | ---------- |
| `title`       | `string`                                   | `required` |
| `font`        | `"block" \| "simple" \| "shade" \| "slim"` | `"block"`  |
| `titleColor`  | `string`                                   | -          |
| `tagline`     | `string`                                   | -          |
| `usage`       | `string`                                   | -          |
| `description` | `string`                                   | -          |
| `columnGap`   | `number`                                   | `4`        |
| `flagWidth`   | `number`                                   | -          |
| `children`    | `ReactNode`                                | `required` |

HelpScreen.Section [#helpscreensection]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `label`      | `string`    | `required` |
| `labelColor` | `string`    | -          |
| `children`   | `ReactNode` | `required` |

HelpScreen.Row [#helpscreenrow]

| Prop               | Type     | Default    |
| ------------------ | -------- | ---------- |
| `flag`             | `string` | `required` |
| `description`      | `string` | `required` |
| `flagColor`        | `string` | -          |
| `descriptionColor` | `string` | -          |


# OpenTUI Templates

Pre-built terminal UI templates for OpenTUI framework.



<ComponentsList folderName="Templates" base="opentui" />


# Info Box

Bordered info panel with header, key-value rows, and tree-prefix rows



<ComponentPreview base="opentui" name="info-box-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/info-box
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="info-box" title="components/ui/info-box.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { InfoBox } from "@/components/ui/info-box";
```

```tsx
<InfoBox borderStyle="round" width={40}>
  <InfoBox.Header icon="📦" label="my-package" version="v2.4.1" />
  <InfoBox.Row label="License" value="MIT" />
  <InfoBox.Row label="Engine" value="node" valueDetail=">=18.0.0" />
  <InfoBox.TreeRow label="Platform" value="darwin-arm64" />
</InfoBox>
```

API Reference [#api-reference]

InfoBox [#infobox]

| Prop          | Type                                        | Default    |
| ------------- | ------------------------------------------- | ---------- |
| `borderStyle` | `"single" \| "round" \| "double" \| "bold"` | `"single"` |
| `borderColor` | `string`                                    | -          |
| `padding`     | `[number, number]`                          | `[0, 1]`   |
| `width`       | `number \| "full"`                          | -          |
| `children`    | `ReactNode`                                 | `required` |

InfoBox.Header [#infoboxheader]

| Prop           | Type     | Default    |
| -------------- | -------- | ---------- |
| `icon`         | `string` | -          |
| `iconColor`    | `string` | `"green"`  |
| `label`        | `string` | `required` |
| `description`  | `string` | -          |
| `version`      | `string` | -          |
| `versionColor` | `string` | `"cyan"`   |

InfoBox.Row [#infoboxrow]

| Prop          | Type      | Default    |
| ------------- | --------- | ---------- |
| `label`       | `string`  | `required` |
| `value`       | `string`  | -          |
| `valueDetail` | `string`  | -          |
| `valueColor`  | `string`  | -          |
| `bold`        | `boolean` | `false`    |
| `tree`        | `boolean` | `false`    |
| `color`       | `string`  | -          |

InfoBox.TreeRow [#infoboxtreerow]

Same props as `InfoBox.Row` except `tree` is always `true`.


# Login Flow

Full-page onboarding/login screen with announcement banner, big ASCII title, description, and numbered select



<ComponentPreview base="opentui" name="login-flow-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/login-flow
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="login-flow" title="components/ui/login-flow.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { LoginFlow } from "@/components/ui/login-flow";
```

```tsx
<LoginFlow title="Acme CLI" padding={2}>
  <LoginFlow.Announcement icon="🎉">
    Version 3.0 is now available!
  </LoginFlow.Announcement>
  <LoginFlow.Description>
    Sign in to access your workspace.
  </LoginFlow.Description>
  <LoginFlow.Select
    label="Choose a login method:"
    options={["GitHub", "Google SSO", "Email & Password"]}
    onSelect={(index) => console.log("selected", index)}
  />
</LoginFlow>
```

API Reference [#api-reference]

LoginFlow [#loginflow]

| Prop         | Type                                       | Default    |
| ------------ | ------------------------------------------ | ---------- |
| `title`      | `string`                                   | -          |
| `titleFont`  | `"block" \| "simple" \| "shade" \| "slim"` | `"block"`  |
| `titleColor` | `string`                                   | -          |
| `padding`    | `number`                                   | `2`        |
| `onSelect`   | `(index: number) => void`                  | -          |
| `children`   | `ReactNode`                                | `required` |

LoginFlow.Announcement [#loginflowannouncement]

| Prop          | Type                                        | Default    |
| ------------- | ------------------------------------------- | ---------- |
| `icon`        | `string`                                    | `"*"`      |
| `iconColor`   | `string`                                    | -          |
| `borderStyle` | `"single" \| "round" \| "double" \| "bold"` | `"single"` |
| `borderColor` | `string`                                    | -          |
| `children`    | `ReactNode`                                 | `required` |

LoginFlow.Description [#loginflowdescription]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `bold`     | `boolean`   | `false`    |
| `dim`      | `boolean`   | `false`    |
| `color`    | `string`    | -          |
| `children` | `ReactNode` | `required` |

LoginFlow.Select [#loginflowselect]

| Prop           | Type                      | Default    |
| -------------- | ------------------------- | ---------- |
| `label`        | `string`                  | -          |
| `labelBold`    | `boolean`                 | `false`    |
| `options`      | `string[]`                | `required` |
| `activeIndex`  | `number`                  | -          |
| `defaultIndex` | `number`                  | `0`        |
| `cursor`       | `string`                  | `"›"`      |
| `cursorColor`  | `string`                  | `"cyan"`   |
| `activeColor`  | `string`                  | `"cyan"`   |
| `onSelect`     | `(index: number) => void` | `required` |
| `keyboardNav`  | `boolean`                 | `true`     |


# Setup Flow

@clack-style step flow with ◇/◆/│ visual language, badge, info steps, and multi-select



<ComponentPreview base="opentui" name="setup-flow-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/setup-flow
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="setup-flow" title="components/ui/setup-flow.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { SetupFlow } from "@/components/ui/setup-flow";
```

```tsx
<SetupFlow title="create-app">
  <SetupFlow.Badge label="v1.0.0" />
  <SetupFlow.Step status="done">Project name set to my-app</SetupFlow.Step>
  <SetupFlow.Step status="done">Template selected: React</SetupFlow.Step>
  <SetupFlow.Step status="active">Installing dependencies...</SetupFlow.Step>
  <SetupFlow.MultiSelect
    label="Select features"
    hint="space to toggle, enter to confirm"
    options={[
      { value: "ts", label: "TypeScript" },
      { value: "eslint", label: "ESLint", description: "Code linting" },
      { value: "prettier", label: "Prettier", description: "Formatting" },
    ]}
    onSubmit={(values) => console.log(values)}
  />
</SetupFlow>
```

API Reference [#api-reference]

SetupFlow [#setupflow]

| Prop             | Type                                       | Default     |
| ---------------- | ------------------------------------------ | ----------- |
| `title`          | `string`                                   | -           |
| `titleFont`      | `"block" \| "simple" \| "shade" \| "slim"` | `"block"`   |
| `titleColor`     | `string`                                   | `"#888888"` |
| `titleColorAlt`  | `string`                                   | -           |
| `connectorChar`  | `string`                                   | `"│"`       |
| `connectorColor` | `string`                                   | -           |
| `children`       | `ReactNode`                                | `required`  |

SetupFlow.Badge [#setupflowbadge]

| Prop    | Type     | Default    |
| ------- | -------- | ---------- |
| `label` | `string` | `required` |
| `bg`    | `string` | `"cyan"`   |
| `color` | `string` | `"black"`  |

SetupFlow.Step [#setupflowstep]

| Prop        | Type                                                      | Default    |
| ----------- | --------------------------------------------------------- | ---------- |
| `icon`      | `string`                                                  | -          |
| `iconColor` | `string`                                                  | -          |
| `status`    | `"done" \| "active" \| "pending" \| "success" \| "error"` | `"done"`   |
| `children`  | `ReactNode`                                               | `required` |

SetupFlow.Spinner [#setupflowspinner]

| Prop         | Type         | Default    |
| ------------ | ------------ | ---------- |
| `label`      | `string`     | `required` |
| `onComplete` | `() => void` | -          |

SetupFlow.MultiSelect [#setupflowmultiselect]

| Prop            | Type                                                       | Default    |
| --------------- | ---------------------------------------------------------- | ---------- |
| `label`         | `string`                                                   | `required` |
| `hint`          | `string`                                                   | -          |
| `options`       | `{ value: string; label: string; description?: string }[]` | `required` |
| `values`        | `string[]`                                                 | -          |
| `onChange`      | `(values: string[]) => void`                               | -          |
| `onSubmit`      | `(values: string[]) => void`                               | -          |
| `checkedChar`   | `string`                                                   | `"■"`      |
| `uncheckedChar` | `string`                                                   | `"□"`      |
| `checkedColor`  | `string`                                                   | `"green"`  |


# Splash Screen

Styled startup banner with big ASCII art title, subtitle, author credit, and status line



<ComponentPreview base="opentui" name="splash-screen-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/splash-screen
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="splash-screen" title="components/ui/splash-screen.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { SplashScreen } from "@/components/ui/splash-screen";
```

```tsx
<SplashScreen
  title="MyCLI"
  subtitle="The modern developer toolkit"
  author={{ name: "Jane Doe", href: "https://example.com" }}
  statusLine={<Text color="green">● Ready on port 3000</Text>}
/>
```

API Reference [#api-reference]

SplashScreen [#splashscreen]

| Prop            | Type                              | Default    |
| --------------- | --------------------------------- | ---------- |
| `title`         | `string`                          | `required` |
| `font`          | `"block" \| "simple"`             | `"block"`  |
| `titleColor`    | `string`                          | -          |
| `titleColorAlt` | `string`                          | -          |
| `bold`          | `boolean`                         | `true`     |
| `subtitle`      | `string`                          | -          |
| `subtitleDim`   | `boolean`                         | `true`     |
| `author`        | `{ name: string; href?: string }` | -          |
| `statusLine`    | `ReactNode`                       | -          |
| `padding`       | `number`                          | `2`        |
| `align`         | `"left" \| "center"`              | -          |


# Usage Monitor

Real-time dashboard with diamond header, progress metrics, burn rate, predictions, and status bar



<ComponentPreview base="opentui" name="usage-monitor-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/usage-monitor
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="usage-monitor" title="components/ui/usage-monitor.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { UsageMonitor } from "@/components/ui/usage-monitor";
```

```tsx
<UsageMonitor refreshInterval={2000}>
  <UsageMonitor.Header title="API Usage Dashboard" />
  <UsageMonitor.Tags items={["Pro Plan", "Billing: Monthly", "US-East"]} />
  <UsageMonitor.Section icon="📊" title="Requests">
    <UsageMonitor.Metric
      label="API Calls"
      value={8420}
      max={10000}
      percent={84.2}
      status="yellow"
      format="number"
    />
  </UsageMonitor.Section>
  <UsageMonitor.Stats>
    <UsageMonitor.StatRow label="Avg Latency" value="142ms" />
    <UsageMonitor.StatRow label="Error Rate" value="0.3%" valueColor="green" />
  </UsageMonitor.Stats>
  <UsageMonitor.StatusBar clock sessionLabel="dashboard" exitHint="q to quit" />
</UsageMonitor>
```

API Reference [#api-reference]

UsageMonitor [#usagemonitor]

| Prop              | Type        | Default    |
| ----------------- | ----------- | ---------- |
| `refreshInterval` | `number`    | `1000`     |
| `separatorChar`   | `string`    | `"─"`      |
| `children`        | `ReactNode` | `required` |

UsageMonitor.Header [#usagemonitorheader]

| Prop             | Type     | Default     |
| ---------------- | -------- | ----------- |
| `title`          | `string` | `required`  |
| `titleColor`     | `string` | `"cyan"`    |
| `decorator`      | `string` | `"◆ ✦ ◆ ✦"` |
| `separatorChar`  | `string` | `"═"`       |
| `separatorColor` | `string` | -           |

UsageMonitor.Tags [#usagemonitortags]

| Prop             | Type       | Default    |
| ---------------- | ---------- | ---------- |
| `items`          | `string[]` | `required` |
| `bracketColor`   | `string`   | `"cyan"`   |
| `separatorColor` | `string`   | `"cyan"`   |

UsageMonitor.Section [#usagemonitorsection]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `icon`     | `string`    | -          |
| `title`    | `string`    | -          |
| `subtitle` | `string`    | -          |
| `children` | `ReactNode` | `required` |

UsageMonitor.Metric [#usagemonitormetric]

| Prop           | Type                                                            | Default    |
| -------------- | --------------------------------------------------------------- | ---------- |
| `icon`         | `string`                                                        | -          |
| `label`        | `string`                                                        | `required` |
| `value`        | `number`                                                        | `required` |
| `max`          | `number`                                                        | `required` |
| `percent`      | `number`                                                        | `required` |
| `status`       | `"green" \| "yellow" \| "red" \| "blue"`                        | `required` |
| `format`       | `"number" \| "currency" \| "duration" \| "percent" \| "custom"` | `required` |
| `formatFn`     | `(v: number, max: number) => string`                            | -          |
| `barWidth`     | `number`                                                        | `22`       |
| `barFillChar`  | `string`                                                        | `"█"`      |
| `barEmptyChar` | `string`                                                        | `"░"`      |
| `barColor`     | `string`                                                        | `"white"`  |
| `maxDim`       | `boolean`                                                       | `false`    |
| `showMax`      | `boolean`                                                       | `true`     |

UsageMonitor.DistributionMetric [#usagemonitordistributionmetric]

| Prop       | Type                                                   | Default    |
| ---------- | ------------------------------------------------------ | ---------- |
| `icon`     | `string`                                               | -          |
| `label`    | `string`                                               | `required` |
| `segments` | `{ label: string; percent: number; color?: string }[]` | `required` |
| `barWidth` | `number`                                               | `22`       |

UsageMonitor.Stats [#usagemonitorstats]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

UsageMonitor.StatRow [#usagemonitorstatrow]

| Prop          | Type     | Default    |
| ------------- | -------- | ---------- |
| `icon`        | `string` | -          |
| `label`       | `string` | `required` |
| `value`       | `string` | `required` |
| `valueSuffix` | `string` | -          |
| `valueColor`  | `string` | `"white"`  |

UsageMonitor.Predictions [#usagemonitorpredictions]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

UsageMonitor.Prediction [#usagemonitorprediction]

| Prop         | Type     | Default    |
| ------------ | -------- | ---------- |
| `label`      | `string` | `required` |
| `value`      | `string` | `required` |
| `valueColor` | `string` | `"yellow"` |

UsageMonitor.StatusBar [#usagemonitorstatusbar]

| Prop           | Type                           | Default   |
| -------------- | ------------------------------ | --------- |
| `clock`        | `boolean`                      | `false`   |
| `clockColor`   | `string`                       | `"cyan"`  |
| `sessionLabel` | `string`                       | -         |
| `sessionColor` | `string`                       | `"green"` |
| `exitHint`     | `string`                       | -         |
| `statusDot`    | `"green" \| "yellow" \| "red"` | `"green"` |
| `separator`    | `string`                       | `" \| "`  |


# Welcome Screen

Two-panel welcome dashboard with titled border, logo, greeting, and sections



<ComponentPreview base="opentui" name="welcome-screen-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/welcome-screen
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="welcome-screen" title="components/ui/welcome-screen.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { WelcomeScreen } from "@/components/ui/welcome-screen";
```

```tsx
<WelcomeScreen appName="DevTool" version="v2.1.0" borderStyle="round">
  <WelcomeScreen.Left>
    <WelcomeScreen.Logo>{"  ╔══╗\n  ║DT║\n  ╚══╝"}</WelcomeScreen.Logo>
    <WelcomeScreen.Greeting>Welcome back, developer!</WelcomeScreen.Greeting>
    <WelcomeScreen.Meta items={["Node 20.x", "TypeScript 5.4", "macOS"]} dim />
  </WelcomeScreen.Left>
  <WelcomeScreen.Right>
    <WelcomeScreen.Section title="Quick Start">
      Run `devtool init` to scaffold a new project.
    </WelcomeScreen.Section>
    <WelcomeScreen.Section title="Recent Projects">
      my-app, api-server, dashboard
    </WelcomeScreen.Section>
  </WelcomeScreen.Right>
</WelcomeScreen>
```

API Reference [#api-reference]

WelcomeScreen [#welcomescreen]

| Prop           | Type                                        | Default    |
| -------------- | ------------------------------------------- | ---------- |
| `appName`      | `string`                                    | `required` |
| `appNameColor` | `string`                                    | -          |
| `version`      | `string`                                    | -          |
| `borderColor`  | `string`                                    | -          |
| `borderStyle`  | `"single" \| "round" \| "double" \| "bold"` | `"single"` |
| `leftWidth`    | `number`                                    | `26`       |
| `children`     | `ReactNode`                                 | `required` |

WelcomeScreen.Left [#welcomescreenleft]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

WelcomeScreen.Right [#welcomescreenright]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |

WelcomeScreen.Greeting [#welcomescreengreeting]

| Prop       | Type                 | Default    |
| ---------- | -------------------- | ---------- |
| `children` | `ReactNode`          | `required` |
| `bold`     | `boolean`            | `true`     |
| `align`    | `"left" \| "center"` | `"left"`   |
| `color`    | `string`             | -          |

WelcomeScreen.Logo [#welcomescreenlogo]

| Prop       | Type                 | Default    |
| ---------- | -------------------- | ---------- |
| `children` | `ReactNode`          | `required` |
| `align`    | `"left" \| "center"` | `"left"`   |

WelcomeScreen.Meta [#welcomescreenmeta]

| Prop        | Type                 | Default    |
| ----------- | -------------------- | ---------- |
| `items`     | `string[]`           | `required` |
| `separator` | `string`             | `" · "`    |
| `align`     | `"left" \| "center"` | `"center"` |
| `dim`       | `boolean`            | `false`    |
| `color`     | `string`             | -          |
| `stack`     | `boolean`            | `false`    |

WelcomeScreen.Section [#welcomescreensection]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `title`      | `string`    | `required` |
| `titleColor` | `string`    | -          |
| `titleBold`  | `boolean`   | `true`     |
| `children`   | `ReactNode` | `required` |


# AMOLED

High contrast dark theme with AMOLED-style pure black.



<ComponentPreview base="ink" name="theme-showcase" theme="amoled" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-amoled
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/amoled.ts" title="lib/terminal-themes/amoled.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { amoledTheme } from "@/lib/terminal-themes/amoled";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={amoledTheme}>
      <Badge variant="info">{"AMOLED"}</Badge>
    </ThemeProvider>
  );
}
```


# Aura

Soft, elegant theme with pastel purple tones.



<ComponentPreview base="ink" name="theme-showcase" theme="aura" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-aura
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/aura.ts" title="lib/terminal-themes/aura.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { auraTheme } from "@/lib/terminal-themes/aura";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={auraTheme}>
      <Badge variant="info">{"Aura"}</Badge>
    </ThemeProvider>
  );
}
```


# Ayu

Clean, modern theme inspired by Ayu terminal.



<ComponentPreview base="ink" name="theme-showcase" theme="ayu" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-ayu
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/ayu.ts" title="lib/terminal-themes/ayu.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { ayuTheme } from "@/lib/terminal-themes/ayu";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={ayuTheme}>
      <Badge variant="info">{"Ayu"}</Badge>
    </ThemeProvider>
  );
}
```


# Carbonfox

Minimal dark theme with carbon tones.



<ComponentPreview base="ink" name="theme-showcase" theme="carbonfox" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-carbonfox
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/carbonfox.ts" title="lib/terminal-themes/carbonfox.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { carbonfoxTheme } from "@/lib/terminal-themes/carbonfox";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={carbonfoxTheme}>
      <Badge variant="info">{"Carbonfox"}</Badge>
    </ThemeProvider>
  );
}
```


# Catppuccin Frappe

Catppuccin frappe flavor - soothing pastel palette.



<ComponentPreview base="ink" name="theme-showcase" theme="catppuccin-frappe" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-catppuccin-frappe
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/catppuccin-frappe.ts" title="lib/terminal-themes/catppuccin-frappe.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { catppuccinFrappeTheme } from "@/lib/terminal-themes/catppuccin-frappe";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={catppuccinFrappeTheme}>
      <Badge variant="info">{"Catppuccin Frappe"}</Badge>
    </ThemeProvider>
  );
}
```


# Catppuccin Macchiato

Catppuccin macchiato flavor - deeper pastel tones.



<ComponentPreview base="ink" name="theme-showcase" theme="catppuccin-macchiato" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-catppuccin-macchiato
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/catppuccin-macchiato.ts" title="lib/terminal-themes/catppuccin-macchiato.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { catppuccinMacchiatoTheme } from "@/lib/terminal-themes/catppuccin-macchiato";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={catppuccinMacchiatoTheme}>
      <Badge variant="info">{"Catppuccin Macchiato"}</Badge>
    </ThemeProvider>
  );
}
```


# Catppuccin

A Catppuccin theme for rich terminal UI previews.



<ComponentPreview base="ink" name="theme-showcase" theme="catppuccin" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-catppuccin
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/catppuccin.ts" title="lib/terminal-themes/catppuccin.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { catppuccinTheme } from "@/lib/terminal-themes/catppuccin";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={catppuccinTheme}>
      <Badge variant="info">Catppuccin</Badge>
    </ThemeProvider>
  );
}
```


# Cobalt2

Vibrant blue and gold theme with deep contrast.



<ComponentPreview base="ink" name="theme-showcase" theme="cobalt2" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-cobalt2
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/cobalt2.ts" title="lib/terminal-themes/cobalt2.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { cobalt2Theme } from "@/lib/terminal-themes/cobalt2";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={cobalt2Theme}>
      <Badge variant="info">{"Cobalt2"}</Badge>
    </ThemeProvider>
  );
}
```


# Cursor

Cursor IDE theme - clean and modern dark theme.



<ComponentPreview base="ink" name="theme-showcase" theme="cursor" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-cursor
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/cursor.ts" title="lib/terminal-themes/cursor.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { cursorTheme } from "@/lib/terminal-themes/cursor";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={cursorTheme}>
      <Badge variant="info">{"Cursor"}</Badge>
    </ThemeProvider>
  );
}
```


# Default

The default termcn terminal theme.



<ComponentPreview base="ink" name="theme-showcase" theme="default" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-default
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { defaultTheme } from "@/lib/terminal-themes/default";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Badge variant="info">Default</Badge>
    </ThemeProvider>
  );
}
```


# Dracula

A purple-heavy Dracula theme for terminal UI components.



<ComponentPreview base="ink" name="theme-showcase" theme="dracula" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-dracula
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/dracula.ts" title="lib/terminal-themes/dracula.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { draculaTheme } from "@/lib/terminal-themes/dracula";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={draculaTheme}>
      <Badge variant="info">Dracula</Badge>
    </ThemeProvider>
  );
}
```


# Everforest

Warm dark theme with forest green tones.



<ComponentPreview base="ink" name="theme-showcase" theme="everforest" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-everforest
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/everforest.ts" title="lib/terminal-themes/everforest.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { everforestTheme } from "@/lib/terminal-themes/everforest";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={everforestTheme}>
      <Badge variant="info">{"Everforest"}</Badge>
    </ThemeProvider>
  );
}
```


# Flexoki

Versatile theme with warm colors and good contrast.



<ComponentPreview base="ink" name="theme-showcase" theme="flexoki" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-flexoki
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/flexoki.ts" title="lib/terminal-themes/flexoki.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { flexokiTheme } from "@/lib/terminal-themes/flexoki";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={flexokiTheme}>
      <Badge variant="info">{"Flexoki"}</Badge>
    </ThemeProvider>
  );
}
```


# GitHub

GitHub's official dark theme.



<ComponentPreview base="ink" name="theme-showcase" theme="github" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-github
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/github.ts" title="lib/terminal-themes/github.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { githubTheme } from "@/lib/terminal-themes/github";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={githubTheme}>
      <Badge variant="info">{"GitHub"}</Badge>
    </ThemeProvider>
  );
}
```


# Gruvbox

Retro-style theme with warm earth tones.



<ComponentPreview base="ink" name="theme-showcase" theme="gruvbox" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-gruvbox
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/gruvbox.ts" title="lib/terminal-themes/gruvbox.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { gruvboxTheme } from "@/lib/terminal-themes/gruvbox";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={gruvboxTheme}>
      <Badge variant="info">{"Gruvbox"}</Badge>
    </ThemeProvider>
  );
}
```


# High Contrast Light

WCAG-friendly light high-contrast theme.



<ComponentPreview base="ink" name="theme-showcase" theme="high-contrast-light" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-high-contrast-light
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/high-contrast.ts" title="lib/terminal-themes/high-contrast.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { highContrastLightTheme } from "@/lib/terminal-themes/high-contrast";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={highContrastLightTheme}>
      <Badge variant="info">{"High Contrast Light"}</Badge>
    </ThemeProvider>
  );
}
```


# High Contrast

High contrast themes for dark and light terminal backgrounds.



<ComponentPreview base="ink" name="theme-showcase" theme="high-contrast" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-high-contrast
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/high-contrast.ts" title="lib/terminal-themes/high-contrast.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { highContrastTheme } from "@/lib/terminal-themes/high-contrast";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={highContrastTheme}>
      <Badge variant="info">High Contrast</Badge>
    </ThemeProvider>
  );
}
```

This file also exports `highContrastLightTheme` for bright terminal backgrounds.


# Kanagawa

Japanese-inspired theme with wave motifs.



<ComponentPreview base="ink" name="theme-showcase" theme="kanagawa" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-kanagawa
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/kanagawa.ts" title="lib/terminal-themes/kanagawa.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { kanagawaTheme } from "@/lib/terminal-themes/kanagawa";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={kanagawaTheme}>
      <Badge variant="info">{"Kanagawa"}</Badge>
    </ThemeProvider>
  );
}
```


# Lucent Orng

Warm orange theme with translucent feel.



<ComponentPreview base="ink" name="theme-showcase" theme="lucent-orng" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-lucent-orng
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/lucent-orng.ts" title="lib/terminal-themes/lucent-orng.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { lucentOrngTheme } from "@/lib/terminal-themes/lucent-orng";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={lucentOrngTheme}>
      <Badge variant="info">{"Lucent Orng"}</Badge>
    </ThemeProvider>
  );
}
```


# Material

Material Design color palette theme.



<ComponentPreview base="ink" name="theme-showcase" theme="material" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-material
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/material.ts" title="lib/terminal-themes/material.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { materialTheme } from "@/lib/terminal-themes/material";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={materialTheme}>
      <Badge variant="info">{"Material"}</Badge>
    </ThemeProvider>
  );
}
```


# Matrix

Green code rain inspired theme.



<ComponentPreview base="ink" name="theme-showcase" theme="matrix" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-matrix
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/matrix.ts" title="lib/terminal-themes/matrix.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { matrixTheme } from "@/lib/terminal-themes/matrix";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={matrixTheme}>
      <Badge variant="info">{"Matrix"}</Badge>
    </ThemeProvider>
  );
}
```


# Mercury

Clean and minimal dark theme.



<ComponentPreview base="ink" name="theme-showcase" theme="mercury" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-mercury
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/mercury.ts" title="lib/terminal-themes/mercury.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { mercuryTheme } from "@/lib/terminal-themes/mercury";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={mercuryTheme}>
      <Badge variant="info">{"Mercury"}</Badge>
    </ThemeProvider>
  );
}
```


# Monokai

A classic Monokai-inspired theme for terminal apps.



<ComponentPreview base="ink" name="theme-showcase" theme="monokai" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-monokai
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/monokai.ts" title="lib/terminal-themes/monokai.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { monokaiTheme } from "@/lib/terminal-themes/monokai";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={monokaiTheme}>
      <Badge variant="info">Monokai</Badge>
    </ThemeProvider>
  );
}
```


# Night Owl

Night owl theme optimized for late-night coding.



<ComponentPreview base="ink" name="theme-showcase" theme="nightowl" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-nightowl
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/nightowl.ts" title="lib/terminal-themes/nightowl.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { nightowlTheme } from "@/lib/terminal-themes/nightowl";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={nightowlTheme}>
      <Badge variant="info">{"Night Owl"}</Badge>
    </ThemeProvider>
  );
}
```


# Nord

A cool Nord palette tuned for terminal contrast.



<ComponentPreview base="ink" name="theme-showcase" theme="nord" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-nord
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/nord.ts" title="lib/terminal-themes/nord.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { nordTheme } from "@/lib/terminal-themes/nord";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={nordTheme}>
      <Badge variant="info">Nord</Badge>
    </ThemeProvider>
  );
}
```


# OC-2

Clean, minimal theme with high contrast.



<ComponentPreview base="ink" name="theme-showcase" theme="oc-2" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-oc-2
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/oc-2.ts" title="lib/terminal-themes/oc-2.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { oc2Theme } from "@/lib/terminal-themes/oc-2";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={oc2Theme}>
      <Badge variant="info">{"OC-2"}</Badge>
    </ThemeProvider>
  );
}
```


# One Dark

A One Dark theme for terminal components.



<ComponentPreview base="ink" name="theme-showcase" theme="one-dark" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-one-dark
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/one-dark.ts" title="lib/terminal-themes/one-dark.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { oneDarkTheme } from "@/lib/terminal-themes/one-dark";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={oneDarkTheme}>
      <Badge variant="info">One Dark</Badge>
    </ThemeProvider>
  );
}
```


# One Dark Pro

One Dark Pro - VS Code theme version.



<ComponentPreview base="ink" name="theme-showcase" theme="onedarkpro" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-onedarkpro
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/onedarkpro.ts" title="lib/terminal-themes/onedarkpro.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { onedarkproTheme } from "@/lib/terminal-themes/onedarkpro";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={onedarkproTheme}>
      <Badge variant="info">{"One Dark Pro"}</Badge>
    </ThemeProvider>
  );
}
```


# OpenCode

The official OpenCode theme.



<ComponentPreview base="ink" name="theme-showcase" theme="opencode" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-opencode
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/opencode.ts" title="lib/terminal-themes/opencode.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { opencodeTheme } from "@/lib/terminal-themes/opencode";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={opencodeTheme}>
      <Badge variant="info">{"OpenCode"}</Badge>
    </ThemeProvider>
  );
}
```


# Orng

Vibrant orange theme with high contrast.



<ComponentPreview base="ink" name="theme-showcase" theme="orng" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-orng
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/orng.ts" title="lib/terminal-themes/orng.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { orngTheme } from "@/lib/terminal-themes/orng";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={orngTheme}>
      <Badge variant="info">{"Orng"}</Badge>
    </ThemeProvider>
  );
}
```


# Osaka Jade

Japanese-inspired theme with jade green tones.



<ComponentPreview base="ink" name="theme-showcase" theme="osaka-jade" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-osaka-jade
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/osaka-jade.ts" title="lib/terminal-themes/osaka-jade.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { osakaJadeTheme } from "@/lib/terminal-themes/osaka-jade";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={osakaJadeTheme}>
      <Badge variant="info">{"Osaka Jade"}</Badge>
    </ThemeProvider>
  );
}
```


# Palenight

Purple-tinted dark theme from React Native.



<ComponentPreview base="ink" name="theme-showcase" theme="palenight" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-palenight
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/palenight.ts" title="lib/terminal-themes/palenight.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { palenightTheme } from "@/lib/terminal-themes/palenight";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={palenightTheme}>
      <Badge variant="info">{"Palenight"}</Badge>
    </ThemeProvider>
  );
}
```


# Rose Pine

Dark theme with warm rose tones.



<ComponentPreview base="ink" name="theme-showcase" theme="rosepine" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-rosepine
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/rosepine.ts" title="lib/terminal-themes/rosepine.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { rosepineTheme } from "@/lib/terminal-themes/rosepine";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={rosepineTheme}>
      <Badge variant="info">{"Rose Pine"}</Badge>
    </ThemeProvider>
  );
}
```


# Shades of Purple

Bold purple theme with vibrant accents.



<ComponentPreview base="ink" name="theme-showcase" theme="shadesofpurple" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-shadesofpurple
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/shadesofpurple.ts" title="lib/terminal-themes/shadesofpurple.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { shadesofpurpleTheme } from "@/lib/terminal-themes/shadesofpurple";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={shadesofpurpleTheme}>
      <Badge variant="info">{"Shades of Purple"}</Badge>
    </ThemeProvider>
  );
}
```


# Solarized

A Solarized theme for terminal components.



<ComponentPreview base="ink" name="theme-showcase" theme="solarized" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-solarized
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/solarized.ts" title="lib/terminal-themes/solarized.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { solarizedTheme } from "@/lib/terminal-themes/solarized";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={solarizedTheme}>
      <Badge variant="info">Solarized</Badge>
    </ThemeProvider>
  );
}
```


# Synthwave '84

Retro-futuristic theme with neon colors.



<ComponentPreview base="ink" name="theme-showcase" theme="synthwave84" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-synthwave84
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/synthwave84.ts" title="lib/terminal-themes/synthwave84.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { synthwave84Theme } from "@/lib/terminal-themes/synthwave84";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={synthwave84Theme}>
      <Badge variant="info">{"Synthwave '84"}</Badge>
    </ThemeProvider>
  );
}
```


# Tokyo Night

Tokyo Night colors for terminal interfaces.



<ComponentPreview base="ink" name="theme-showcase" theme="tokyo-night" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-tokyo-night
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/tokyo-night.ts" title="lib/terminal-themes/tokyo-night.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { tokyoNightTheme } from "@/lib/terminal-themes/tokyo-night";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={tokyoNightTheme}>
      <Badge variant="info">Tokyo Night</Badge>
    </ThemeProvider>
  );
}
```


# Vercel

Vercel's official brand colors.



<ComponentPreview base="ink" name="theme-showcase" theme="vercel" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-vercel
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/vercel.ts" title="lib/terminal-themes/vercel.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { vercelTheme } from "@/lib/terminal-themes/vercel";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={vercelTheme}>
      <Badge variant="info">{"Vercel"}</Badge>
    </ThemeProvider>
  );
}
```


# Vesper

Minimal stark theme with high contrast.



<ComponentPreview base="ink" name="theme-showcase" theme="vesper" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-vesper
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/vesper.ts" title="lib/terminal-themes/vesper.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { vesperTheme } from "@/lib/terminal-themes/vesper";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={vesperTheme}>
      <Badge variant="info">{"Vesper"}</Badge>
    </ThemeProvider>
  );
}
```


# Zenburn

Low-contrast theme for long coding sessions.



<ComponentPreview base="ink" name="theme-showcase" theme="zenburn" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/theme-zenburn
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/zenburn.ts" title="lib/terminal-themes/zenburn.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { zenburnTheme } from "@/lib/terminal-themes/zenburn";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={zenburnTheme}>
      <Badge variant="info">{"Zenburn"}</Badge>
    </ThemeProvider>
  );
}
```


# AMOLED

High contrast dark theme with AMOLED-style pure black.



<ComponentPreview base="opentui" name="theme-showcase" theme="amoled" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-amoled
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/amoled.ts" title="lib/terminal-themes/amoled.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { amoledTheme } from "@/lib/terminal-themes/amoled";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={amoledTheme}>
      <Badge variant="info">{"AMOLED"}</Badge>
    </ThemeProvider>
  );
}
```


# Aura

Soft, elegant theme with pastel purple tones.



<ComponentPreview base="opentui" name="theme-showcase" theme="aura" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-aura
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/aura.ts" title="lib/terminal-themes/aura.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { auraTheme } from "@/lib/terminal-themes/aura";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={auraTheme}>
      <Badge variant="info">{"Aura"}</Badge>
    </ThemeProvider>
  );
}
```


# Ayu

Clean, modern theme inspired by Ayu terminal.



<ComponentPreview base="opentui" name="theme-showcase" theme="ayu" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-ayu
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/ayu.ts" title="lib/terminal-themes/ayu.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { ayuTheme } from "@/lib/terminal-themes/ayu";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={ayuTheme}>
      <Badge variant="info">{"Ayu"}</Badge>
    </ThemeProvider>
  );
}
```


# Carbonfox

Minimal dark theme with carbon tones.



<ComponentPreview base="opentui" name="theme-showcase" theme="carbonfox" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-carbonfox
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/carbonfox.ts" title="lib/terminal-themes/carbonfox.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { carbonfoxTheme } from "@/lib/terminal-themes/carbonfox";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={carbonfoxTheme}>
      <Badge variant="info">{"Carbonfox"}</Badge>
    </ThemeProvider>
  );
}
```


# Catppuccin Frappe

Catppuccin frappe flavor - soothing pastel palette.



<ComponentPreview base="opentui" name="theme-showcase" theme="catppuccin-frappe" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-catppuccin-frappe
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/catppuccin-frappe.ts" title="lib/terminal-themes/catppuccin-frappe.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { catppuccinFrappeTheme } from "@/lib/terminal-themes/catppuccin-frappe";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={catppuccinFrappeTheme}>
      <Badge variant="info">{"Catppuccin Frappe"}</Badge>
    </ThemeProvider>
  );
}
```


# Catppuccin Macchiato

Catppuccin macchiato flavor - deeper pastel tones.



<ComponentPreview base="opentui" name="theme-showcase" theme="catppuccin-macchiato" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-catppuccin-macchiato
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/catppuccin-macchiato.ts" title="lib/terminal-themes/catppuccin-macchiato.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { catppuccinMacchiatoTheme } from "@/lib/terminal-themes/catppuccin-macchiato";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={catppuccinMacchiatoTheme}>
      <Badge variant="info">{"Catppuccin Macchiato"}</Badge>
    </ThemeProvider>
  );
}
```


# Catppuccin

A Catppuccin theme for rich terminal UI previews.



<ComponentPreview base="opentui" name="theme-showcase" theme="catppuccin" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-catppuccin
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/catppuccin.ts" title="lib/terminal-themes/catppuccin.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { catppuccinTheme } from "@/lib/terminal-themes/catppuccin";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={catppuccinTheme}>
      <Badge variant="info">Catppuccin</Badge>
    </ThemeProvider>
  );
}
```


# Cobalt2

Vibrant blue and gold theme with deep contrast.



<ComponentPreview base="opentui" name="theme-showcase" theme="cobalt2" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-cobalt2
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/cobalt2.ts" title="lib/terminal-themes/cobalt2.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { cobalt2Theme } from "@/lib/terminal-themes/cobalt2";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={cobalt2Theme}>
      <Badge variant="info">{"Cobalt2"}</Badge>
    </ThemeProvider>
  );
}
```


# Cursor

Cursor IDE theme - clean and modern dark theme.



<ComponentPreview base="opentui" name="theme-showcase" theme="cursor" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-cursor
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/cursor.ts" title="lib/terminal-themes/cursor.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { cursorTheme } from "@/lib/terminal-themes/cursor";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={cursorTheme}>
      <Badge variant="info">{"Cursor"}</Badge>
    </ThemeProvider>
  );
}
```


# Default

The default termcn terminal theme.



<ComponentPreview base="opentui" name="theme-showcase" theme="default" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-default
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { defaultTheme } from "@/lib/terminal-themes/default";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Badge variant="info">Default</Badge>
    </ThemeProvider>
  );
}
```


# Dracula

A purple-heavy Dracula theme for terminal UI components.



<ComponentPreview base="opentui" name="theme-showcase" theme="dracula" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-dracula
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/dracula.ts" title="lib/terminal-themes/dracula.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { draculaTheme } from "@/lib/terminal-themes/dracula";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={draculaTheme}>
      <Badge variant="info">Dracula</Badge>
    </ThemeProvider>
  );
}
```


# Everforest

Warm dark theme with forest green tones.



<ComponentPreview base="opentui" name="theme-showcase" theme="everforest" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-everforest
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/everforest.ts" title="lib/terminal-themes/everforest.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { everforestTheme } from "@/lib/terminal-themes/everforest";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={everforestTheme}>
      <Badge variant="info">{"Everforest"}</Badge>
    </ThemeProvider>
  );
}
```


# Flexoki

Versatile theme with warm colors and good contrast.



<ComponentPreview base="opentui" name="theme-showcase" theme="flexoki" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-flexoki
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/flexoki.ts" title="lib/terminal-themes/flexoki.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { flexokiTheme } from "@/lib/terminal-themes/flexoki";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={flexokiTheme}>
      <Badge variant="info">{"Flexoki"}</Badge>
    </ThemeProvider>
  );
}
```


# GitHub

GitHub's official dark theme.



<ComponentPreview base="opentui" name="theme-showcase" theme="github" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-github
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/github.ts" title="lib/terminal-themes/github.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { githubTheme } from "@/lib/terminal-themes/github";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={githubTheme}>
      <Badge variant="info">{"GitHub"}</Badge>
    </ThemeProvider>
  );
}
```


# Gruvbox

Retro-style theme with warm earth tones.



<ComponentPreview base="opentui" name="theme-showcase" theme="gruvbox" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-gruvbox
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/gruvbox.ts" title="lib/terminal-themes/gruvbox.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { gruvboxTheme } from "@/lib/terminal-themes/gruvbox";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={gruvboxTheme}>
      <Badge variant="info">{"Gruvbox"}</Badge>
    </ThemeProvider>
  );
}
```


# High Contrast Light

WCAG-friendly light high-contrast theme.



<ComponentPreview base="opentui" name="theme-showcase" theme="high-contrast-light" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-high-contrast-light
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/high-contrast.ts" title="lib/terminal-themes/high-contrast.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { highContrastLightTheme } from "@/lib/terminal-themes/high-contrast";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={highContrastLightTheme}>
      <Badge variant="info">{"High Contrast Light"}</Badge>
    </ThemeProvider>
  );
}
```


# High Contrast

High contrast themes for dark and light terminal backgrounds.



<ComponentPreview base="opentui" name="theme-showcase" theme="high-contrast" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-high-contrast
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/high-contrast.ts" title="lib/terminal-themes/high-contrast.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { highContrastTheme } from "@/lib/terminal-themes/high-contrast";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={highContrastTheme}>
      <Badge variant="info">High Contrast</Badge>
    </ThemeProvider>
  );
}
```

This file also exports `highContrastLightTheme` for bright terminal backgrounds.


# Kanagawa

Japanese-inspired theme with wave motifs.



<ComponentPreview base="opentui" name="theme-showcase" theme="kanagawa" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-kanagawa
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/kanagawa.ts" title="lib/terminal-themes/kanagawa.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { kanagawaTheme } from "@/lib/terminal-themes/kanagawa";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={kanagawaTheme}>
      <Badge variant="info">{"Kanagawa"}</Badge>
    </ThemeProvider>
  );
}
```


# Lucent Orng

Warm orange theme with translucent feel.



<ComponentPreview base="opentui" name="theme-showcase" theme="lucent-orng" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-lucent-orng
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/lucent-orng.ts" title="lib/terminal-themes/lucent-orng.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { lucentOrngTheme } from "@/lib/terminal-themes/lucent-orng";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={lucentOrngTheme}>
      <Badge variant="info">{"Lucent Orng"}</Badge>
    </ThemeProvider>
  );
}
```


# Material

Material Design color palette theme.



<ComponentPreview base="opentui" name="theme-showcase" theme="material" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-material
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/material.ts" title="lib/terminal-themes/material.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { materialTheme } from "@/lib/terminal-themes/material";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={materialTheme}>
      <Badge variant="info">{"Material"}</Badge>
    </ThemeProvider>
  );
}
```


# Matrix

Green code rain inspired theme.



<ComponentPreview base="opentui" name="theme-showcase" theme="matrix" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-matrix
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/matrix.ts" title="lib/terminal-themes/matrix.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { matrixTheme } from "@/lib/terminal-themes/matrix";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={matrixTheme}>
      <Badge variant="info">{"Matrix"}</Badge>
    </ThemeProvider>
  );
}
```


# Mercury

Clean and minimal dark theme.



<ComponentPreview base="opentui" name="theme-showcase" theme="mercury" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-mercury
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/mercury.ts" title="lib/terminal-themes/mercury.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { mercuryTheme } from "@/lib/terminal-themes/mercury";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={mercuryTheme}>
      <Badge variant="info">{"Mercury"}</Badge>
    </ThemeProvider>
  );
}
```


# Monokai

A classic Monokai-inspired theme for terminal apps.



<ComponentPreview base="opentui" name="theme-showcase" theme="monokai" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-monokai
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/monokai.ts" title="lib/terminal-themes/monokai.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { monokaiTheme } from "@/lib/terminal-themes/monokai";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={monokaiTheme}>
      <Badge variant="info">Monokai</Badge>
    </ThemeProvider>
  );
}
```


# Night Owl

Night owl theme optimized for late-night coding.



<ComponentPreview base="opentui" name="theme-showcase" theme="nightowl" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-nightowl
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/nightowl.ts" title="lib/terminal-themes/nightowl.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { nightowlTheme } from "@/lib/terminal-themes/nightowl";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={nightowlTheme}>
      <Badge variant="info">{"Night Owl"}</Badge>
    </ThemeProvider>
  );
}
```


# Nord

A cool Nord palette tuned for terminal contrast.



<ComponentPreview base="opentui" name="theme-showcase" theme="nord" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-nord
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/nord.ts" title="lib/terminal-themes/nord.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { nordTheme } from "@/lib/terminal-themes/nord";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={nordTheme}>
      <Badge variant="info">Nord</Badge>
    </ThemeProvider>
  );
}
```


# OC-2

Clean, minimal theme with high contrast.



<ComponentPreview base="opentui" name="theme-showcase" theme="oc-2" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-oc-2
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/oc-2.ts" title="lib/terminal-themes/oc-2.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { oc2Theme } from "@/lib/terminal-themes/oc-2";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={oc2Theme}>
      <Badge variant="info">{"OC-2"}</Badge>
    </ThemeProvider>
  );
}
```


# One Dark

A One Dark theme for terminal components.



<ComponentPreview base="opentui" name="theme-showcase" theme="one-dark" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-one-dark
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/one-dark.ts" title="lib/terminal-themes/one-dark.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { oneDarkTheme } from "@/lib/terminal-themes/one-dark";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={oneDarkTheme}>
      <Badge variant="info">One Dark</Badge>
    </ThemeProvider>
  );
}
```


# One Dark Pro

One Dark Pro - VS Code theme version.



<ComponentPreview base="opentui" name="theme-showcase" theme="onedarkpro" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-onedarkpro
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/onedarkpro.ts" title="lib/terminal-themes/onedarkpro.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { onedarkproTheme } from "@/lib/terminal-themes/onedarkpro";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={onedarkproTheme}>
      <Badge variant="info">{"One Dark Pro"}</Badge>
    </ThemeProvider>
  );
}
```


# OpenCode

The official OpenCode theme.



<ComponentPreview base="opentui" name="theme-showcase" theme="opencode" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-opencode
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/opencode.ts" title="lib/terminal-themes/opencode.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { opencodeTheme } from "@/lib/terminal-themes/opencode";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={opencodeTheme}>
      <Badge variant="info">{"OpenCode"}</Badge>
    </ThemeProvider>
  );
}
```


# Orng

Vibrant orange theme with high contrast.



<ComponentPreview base="opentui" name="theme-showcase" theme="orng" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-orng
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/orng.ts" title="lib/terminal-themes/orng.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { orngTheme } from "@/lib/terminal-themes/orng";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={orngTheme}>
      <Badge variant="info">{"Orng"}</Badge>
    </ThemeProvider>
  );
}
```


# Osaka Jade

Japanese-inspired theme with jade green tones.



<ComponentPreview base="opentui" name="theme-showcase" theme="osaka-jade" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-osaka-jade
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/osaka-jade.ts" title="lib/terminal-themes/osaka-jade.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { osakaJadeTheme } from "@/lib/terminal-themes/osaka-jade";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={osakaJadeTheme}>
      <Badge variant="info">{"Osaka Jade"}</Badge>
    </ThemeProvider>
  );
}
```


# Palenight

Purple-tinted dark theme from React Native.



<ComponentPreview base="opentui" name="theme-showcase" theme="palenight" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-palenight
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/palenight.ts" title="lib/terminal-themes/palenight.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { palenightTheme } from "@/lib/terminal-themes/palenight";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={palenightTheme}>
      <Badge variant="info">{"Palenight"}</Badge>
    </ThemeProvider>
  );
}
```


# Rose Pine

Dark theme with warm rose tones.



<ComponentPreview base="opentui" name="theme-showcase" theme="rosepine" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-rosepine
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/rosepine.ts" title="lib/terminal-themes/rosepine.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { rosepineTheme } from "@/lib/terminal-themes/rosepine";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={rosepineTheme}>
      <Badge variant="info">{"Rose Pine"}</Badge>
    </ThemeProvider>
  );
}
```


# Shades of Purple

Bold purple theme with vibrant accents.



<ComponentPreview base="opentui" name="theme-showcase" theme="shadesofpurple" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-shadesofpurple
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/shadesofpurple.ts" title="lib/terminal-themes/shadesofpurple.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { shadesofpurpleTheme } from "@/lib/terminal-themes/shadesofpurple";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={shadesofpurpleTheme}>
      <Badge variant="info">{"Shades of Purple"}</Badge>
    </ThemeProvider>
  );
}
```


# Solarized

A Solarized theme for terminal components.



<ComponentPreview base="opentui" name="theme-showcase" theme="solarized" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-solarized
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/solarized.ts" title="lib/terminal-themes/solarized.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { solarizedTheme } from "@/lib/terminal-themes/solarized";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={solarizedTheme}>
      <Badge variant="info">Solarized</Badge>
    </ThemeProvider>
  );
}
```


# Synthwave '84

Retro-futuristic theme with neon colors.



<ComponentPreview base="opentui" name="theme-showcase" theme="synthwave84" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-synthwave84
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/synthwave84.ts" title="lib/terminal-themes/synthwave84.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { synthwave84Theme } from "@/lib/terminal-themes/synthwave84";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={synthwave84Theme}>
      <Badge variant="info">{"Synthwave '84"}</Badge>
    </ThemeProvider>
  );
}
```


# Tokyo Night

Tokyo Night colors for terminal interfaces.



<ComponentPreview base="opentui" name="theme-showcase" theme="tokyo-night" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-tokyo-night
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/tokyo-night.ts" title="lib/terminal-themes/tokyo-night.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { tokyoNightTheme } from "@/lib/terminal-themes/tokyo-night";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={tokyoNightTheme}>
      <Badge variant="info">Tokyo Night</Badge>
    </ThemeProvider>
  );
}
```


# Vercel

Vercel's official brand colors.



<ComponentPreview base="opentui" name="theme-showcase" theme="vercel" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-vercel
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/vercel.ts" title="lib/terminal-themes/vercel.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { vercelTheme } from "@/lib/terminal-themes/vercel";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={vercelTheme}>
      <Badge variant="info">{"Vercel"}</Badge>
    </ThemeProvider>
  );
}
```


# Vesper

Minimal stark theme with high contrast.



<ComponentPreview base="opentui" name="theme-showcase" theme="vesper" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-vesper
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/vesper.ts" title="lib/terminal-themes/vesper.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { vesperTheme } from "@/lib/terminal-themes/vesper";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={vesperTheme}>
      <Badge variant="info">{"Vesper"}</Badge>
    </ThemeProvider>
  );
}
```


# Zenburn

Low-contrast theme for long coding sessions.



<ComponentPreview base="opentui" name="theme-showcase" theme="zenburn" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/theme-zenburn
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/zenburn.ts" title="lib/terminal-themes/zenburn.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThemeProvider } from "@/providers/theme-provider";
import { zenburnTheme } from "@/lib/terminal-themes/zenburn";
import { Badge } from "@/components/ui/badge";

export function Example() {
  return (
    <ThemeProvider theme={zenburnTheme}>
      <Badge variant="info">{"Zenburn"}</Badge>
    </ThemeProvider>
  );
}
```


# Chat Message

Chat message bubble with role label, streaming indicator, and collapsible content



<ComponentPreview base="ink" name="chat-message-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/chat-message
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="chat-message" title="components/ui/chat-message.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ChatMessage } from "@/components/ui/chat-message";
```

```tsx
<ChatMessage sender="assistant" name="Claude" timestamp={new Date()}>
  Here is the refactored version of your function.
</ChatMessage>
```

API Reference [#api-reference]

ChatMessage [#chatmessage]

| Prop        | Type                                           | Default    |
| ----------- | ---------------------------------------------- | ---------- |
| `sender`    | `"user" \| "assistant" \| "system" \| "error"` | `required` |
| `name`      | `string`                                       | -          |
| `timestamp` | `Date`                                         | -          |
| `streaming` | `boolean`                                      | `false`    |
| `collapsed` | `boolean`                                      | -          |
| `children`  | `ReactNode`                                    | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Chat Thread

Scrollable container for stacking ChatMessage components in a conversation thread



<ComponentPreview base="ink" name="chat-thread-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/chat-thread
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource base="ink" name="chat-thread" title="components/ui/chat-thread.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ChatThread } from "@/components/ui/chat-thread";
import { ChatMessage } from "@/components/ui/chat-message";
```

```tsx
<ChatThread maxHeight={20}>
  <ChatMessage sender="user">How do I center a div?</ChatMessage>
  <ChatMessage sender="assistant">
    Use flexbox: display flex, justify-content center, align-items center.
  </ChatMessage>
</ChatThread>
```

API Reference [#api-reference]

ChatThread [#chatthread]

| Prop         | Type        | Default |
| ------------ | ----------- | ------- |
| `maxHeight`  | `number`    | -       |
| `autoScroll` | `boolean`   | `true`  |
| `children`   | `ReactNode` | -       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Conversation History

Arrow-key scrollable stack for long chat threads



<ComponentPreview base="ink" name="conversation-history-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/conversation-history
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="conversation-history" title="components/ui/conversation-history.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ConversationHistory } from "@/components/ui/conversation-history";
import { Text } from "ink";
```

```tsx
<ConversationHistory maxHeight={12} isActive>
  <Text>user: Hello</Text>
  <Text>assistant: Hi — how can I help?</Text>
</ConversationHistory>
```

When `isActive&#x60; is true, &#x2A;*↑*&#x2A; / &#x2A;*↓** move the window over `children`. The view starts scrolled to the bottom (`maxHeight` lines visible).

API Reference [#api-reference]

ConversationHistory [#conversationhistory]

| Prop             | Type        | Default |
| ---------------- | ----------- | ------- |
| `maxHeight`      | `number`    | `20`    |
| `children`       | `ReactNode` | -       |
| `showScrollHint` | `boolean`   | `true`  |
| `isActive`       | `boolean`   | `true`  |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Error Retry

Inline error callout with retry and dismiss shortcuts



<ComponentPreview base="ink" name="error-retry-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/error-retry
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="error-retry" title="components/ui/error-retry.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ErrorRetry } from "@/components/ui/error-retry";
```

```tsx
<ErrorRetry
  error={new Error("Network error")}
  retryCount={0}
  maxRetries={3}
  onRetry={() => refetch()}
  onDismiss={() => setError(null)}
  isActive
/>
```

Shortcuts [#shortcuts]

When `retryCount < maxRetries` and `isActive` is true:

* **Enter** or **r** — calls `onRetry`
* **Esc** — calls `onDismiss`

After `retryCount >= maxRetries`, only **Esc** dismisses; retry shortcuts are disabled.

API Reference [#api-reference]

ErrorRetry [#errorretry]

| Prop         | Type              | Default    |
| ------------ | ----------------- | ---------- |
| `error`      | `Error \| string` | `required` |
| `onRetry`    | `() => void`      | -          |
| `onDismiss`  | `() => void`      | -          |
| `retryCount` | `number`          | `0`        |
| `maxRetries` | `number`          | `3`        |
| `isActive`   | `boolean`         | `true`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# File Change

Interactive file-change review list with diff expansion, per-file accept/reject actions, and accept-all shortcut



<ComponentPreview base="ink" name="file-change-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/file-change
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="file-change" title="components/ui/file-change.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { FileChange } from "@/components/ui/file-change";
```

```tsx
<FileChange
  changes={[
    { path: "src/utils.ts", type: "modify", diff: "-old line\n+new line" },
    {
      path: "src/helpers.ts",
      type: "create",
      content: "export const add = (a, b) => a + b;",
    },
    { path: "src/legacy.ts", type: "delete" },
  ]}
  onAccept={(path) => console.log("accepted", path)}
  onReject={(path) => console.log("rejected", path)}
  onAcceptAll={() => console.log("accepted all")}
/>
```

API Reference [#api-reference]

FileChange [#filechange]

| Prop          | Type                     | Default    |
| ------------- | ------------------------ | ---------- |
| `changes`     | `FileChangeItem[]`       | `required` |
| `onAccept`    | `(path: string) => void` | -          |
| `onReject`    | `(path: string) => void` | -          |
| `onAcceptAll` | `() => void`             | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# AI

Components for building AI-powered chat interfaces and tool interactions.



<ComponentsList category="ai" />


# Model Selector

Keyboard-navigable list for selecting an AI model, with optional provider grouping and context-window display



<ComponentPreview base="ink" name="model-selector-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/model-selector
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="model-selector" title="components/ui/model-selector.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ModelSelector } from "@/components/ui/model-selector";
```

```tsx
<ModelSelector
  models={[
    { id: "gpt-4o", name: "GPT-4o", provider: "OpenAI", context: 128000 },
    {
      id: "claude-3-5-sonnet",
      name: "Claude 3.5 Sonnet",
      provider: "Anthropic",
      context: 200000,
    },
  ]}
  selected="gpt-4o"
  onSelect={(id) => console.log("selected", id)}
/>
```

API Reference [#api-reference]

ModelSelector [#modelselector]

| Prop              | Type                   | Default    |
| ----------------- | ---------------------- | ---------- |
| `models`          | `ModelOption[]`        | `required` |
| `selected`        | `string`               | `required` |
| `onSelect`        | `(id: string) => void` | `required` |
| `showContext`     | `boolean`              | `true`     |
| `showProvider`    | `boolean`              | `true`     |
| `groupByProvider` | `boolean`              | `false`    |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Streaming Text

Token-by-token streaming text with blinking cursor and optional typing animation



<ComponentPreview base="ink" name="streaming-text-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/streaming-text
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource base="ink" name="streaming-text" title="components/ui/streaming-text.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { StreamingText } from "@/components/ui/streaming-text";
```

```tsx
<StreamingText text="Installing dependencies..." animate speed={20} />
```

API Reference [#api-reference]

StreamingText [#streamingtext]

| Prop          | Type                         | Default |
| ------------- | ---------------------------- | ------- |
| `text`        | `string`                     | -       |
| `stream`      | `AsyncIterable<string>`      | -       |
| `cursor`      | `boolean`                    | `true`  |
| `animate`     | `boolean`                    | `false` |
| `speed`       | `number`                     | `30`    |
| `onComplete`  | `(fullText: string) => void` | -       |
| `cursorColor` | `string`                     | -       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Thinking Block

Collapsible block for displaying extended thinking / reasoning content from an AI model



<ComponentPreview base="ink" name="thinking-block-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/thinking-block
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="thinking-block" title="components/ui/thinking-block.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThinkingBlock } from "@/components/ui/thinking-block";
```

```tsx
<ThinkingBlock
  content="The user wants to refactor the function. I should split it into smaller helpers..."
  tokenCount={1284}
  duration={3200}
/>
```

API Reference [#api-reference]

ThinkingBlock [#thinkingblock]

| Prop               | Type      | Default       |
| ------------------ | --------- | ------------- |
| `content`          | `string`  | `required`    |
| `streaming`        | `boolean` | `false`       |
| `defaultCollapsed` | `boolean` | `true`        |
| `label`            | `string`  | `"Reasoning"` |
| `tokenCount`       | `number`  | -             |
| `duration`         | `number`  | -             |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Token Usage

Compact token counter showing prompt and completion usage with optional cost estimate; also exports ContextMeter for visualising context window fill



<ComponentPreview base="ink" name="token-usage-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/token-usage
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource base="ink" name="token-usage" title="components/ui/token-usage.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TokenUsage, ContextMeter } from "@/components/ui/token-usage";
```

```tsx
<TokenUsage prompt={2450} completion={890} model="gpt-4o" showCost />
```

API Reference [#api-reference]

TokenUsage [#tokenusage]

| Prop         | Type      | Default    |
| ------------ | --------- | ---------- |
| `prompt`     | `number`  | `required` |
| `completion` | `number`  | `required` |
| `model`      | `string`  | -          |
| `showCost`   | `boolean` | `false`    |

ContextMeter [#contextmeter]

| Prop          | Type      | Default    |
| ------------- | --------- | ---------- |
| `used`        | `number`  | `required` |
| `limit`       | `number`  | `required` |
| `label`       | `string`  | -          |
| `showPercent` | `boolean` | `true`     |
| `warnAt`      | `number`  | `75`       |
| `criticalAt`  | `number`  | `90`       |
| `width`       | `number`  | `20`       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Tool Approval

Interactive approval prompt for AI tool calls with risk-level badge, args display, and auto-deny timeout



<ComponentPreview base="ink" name="tool-approval-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tool-approval
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="tool-approval" title="components/ui/tool-approval.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ToolApproval } from "@/components/ui/tool-approval";
```

```tsx
<ToolApproval
  name="execute_shell"
  description="Run a shell command on the host machine"
  args={{ command: "rm -rf ./dist" }}
  risk="high"
  onApprove={() => console.log("approved")}
  onDeny={() => console.log("denied")}
  timeout={30}
/>
```

API Reference [#api-reference]

ToolApproval [#toolapproval]

| Prop            | Type                          | Default    |
| --------------- | ----------------------------- | ---------- |
| `name`          | `string`                      | `required` |
| `description`   | `string`                      | -          |
| `args`          | `Record<string, unknown>`     | -          |
| `risk`          | `"low" \| "medium" \| "high"` | `"low"`    |
| `onApprove`     | `() => void`                  | `required` |
| `onDeny`        | `() => void`                  | `required` |
| `onAlwaysAllow` | `() => void`                  | -          |
| `timeout`       | `number`                      | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Tool Call

Displays an AI tool invocation with status indicator, args, result, and elapsed time



<ComponentPreview base="ink" name="tool-call-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tool-call
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-animation.ts" title="hooks/use-animation.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="tool-call" title="components/ui/tool-call.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ToolCall } from "@/components/ui/tool-call";
```

```tsx
<ToolCall
  name="search_codebase"
  args={{ query: "handleSubmit", maxResults: 10 }}
  status="success"
  result="Found 3 matches in src/components/"
  duration={245}
/>
```

API Reference [#api-reference]

ToolCall [#toolcall]

| Prop               | Type                                             | Default    |
| ------------------ | ------------------------------------------------ | ---------- |
| `name`             | `string`                                         | `required` |
| `args`             | `Record<string, unknown>`                        | -          |
| `status`           | `"pending" \| "running" \| "success" \| "error"` | `required` |
| `result`           | `unknown`                                        | -          |
| `duration`         | `number`                                         | -          |
| `collapsible`      | `boolean`                                        | `true`     |
| `defaultCollapsed` | `boolean`                                        | `true`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Card

Card with header, body, and footer slots



<ComponentPreview base="ink" name="card-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/card
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="card" title="components/ui/card.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Card } from "@/components/ui/card";
```

```tsx
<Card title="System Info" subtitle="Local machine">
  <Text>CPU: 4 cores @ 3.2 GHz</Text>
</Card>
```

API Reference [#api-reference]

Card [#card]

| Prop                | Type                                                                                         | Default    |
| ------------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `title`             | `string`                                                                                     | -          |
| `subtitle`          | `string`                                                                                     | -          |
| `children`          | `ReactNode`                                                                                  | `required` |
| `footer`            | `ReactNode`                                                                                  | -          |
| `borderColor`       | `string`                                                                                     | -          |
| `width`             | `number`                                                                                     | -          |
| `borderStyle`       | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`  |
| `paddingX`          | `number`                                                                                     | `1`        |
| `paddingY`          | `number`                                                                                     | `0`        |
| `footerDividerChar` | `string`                                                                                     | `"─"`      |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Data Grid

Advanced data grid with sorting, filtering, pagination, and cell editing



<ComponentPreview base="ink" name="data-grid-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/data-grid
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="data-grid" title="components/ui/data-grid.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DataGrid } from "@/components/ui/data-grid";
```

```tsx
<DataGrid
  data={[
    { name: "Alice", role: "Engineer", status: "Active" },
    { name: "Bob", role: "Designer", status: "Away" },
  ]}
  columns={[
    { key: "name", header: "Name", width: 12 },
    { key: "role", header: "Role", width: 12 },
    { key: "status", header: "Status", width: 10 },
  ]}
/>
```

API Reference [#api-reference]

DataGrid [#datagrid]

| Prop                | Type                                           | Default    |
| ------------------- | ---------------------------------------------- | ---------- |
| `data`              | `T[]`                                          | `required` |
| `columns`           | `DataGridColumn<T>[]`                          | `required` |
| `pageSize`          | `number`                                       | `10`       |
| `onRowSelect`       | `(row: T) => void`                             | -          |
| `onCellEdit`        | `(row: T, key: string, value: string) => void` | -          |
| `borderColor`       | `string`                                       | -          |
| `borderStyle`       | `"single" \| "double" \| "round" \| "bold"`    | `"single"` |
| `showRowNumbers`    | `boolean`                                      | `false`    |
| `filterPlaceholder` | `string`                                       | -          |

DataGridColumn [#datagridcolumn]

| Prop         | Type                                 | Default    |
| ------------ | ------------------------------------ | ---------- |
| `key`        | `keyof T & string`                   | `required` |
| `header`     | `string`                             | `required` |
| `width`      | `number`                             | -          |
| `align`      | `"left" \| "right" \| "center"`      | `"left"`   |
| `render`     | `(value: unknown, row: T) => string` | -          |
| `filterable` | `boolean`                            | -          |
| `sortable`   | `boolean`                            | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Definition

Term–description definition list



<ComponentPreview base="ink" name="definition-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/definition
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="ink" name="definition" title="components/ui/definition.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Definition } from "@/components/ui/definition";
```

```tsx
<Definition
  items={[
    { term: "CLI", description: "Command Line Interface" },
    { term: "TUI", description: "Terminal User Interface" },
  ]}
/>
```

API Reference [#api-reference]

Definition [#definition]

| Prop        | Type               | Default    |
| ----------- | ------------------ | ---------- |
| `items`     | `DefinitionItem[]` | `required` |
| `termColor` | `string`           | -          |

DefinitionItem [#definitionitem]

| Prop          | Type     | Default    |
| ------------- | -------- | ---------- |
| `term`        | `string` | `required` |
| `description` | `string` | `required` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Diff View

Unified, split, and inline diff viewer with LCS-based diff algorithm and line numbers



<ComponentPreview base="ink" name="diff-view-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/diff-view
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource base="ink" name="diff-view" title="components/ui/diff-view.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DiffView } from "@/components/ui/diff-view";
```

```tsx
<DiffView
  filename="config.ts"
  oldText={"const port = 3000;\nconst host = 'localhost';"}
  newText={"const port = 8080;\nconst host = 'localhost';\nconst debug = true;"}
/>
```

API Reference [#api-reference]

DiffView [#diffview]

| Prop              | Type                               | Default     |
| ----------------- | ---------------------------------- | ----------- |
| `oldText`         | `string`                           | `required`  |
| `newText`         | `string`                           | `required`  |
| `filename`        | `string`                           | -           |
| `language`        | `string`                           | -           |
| `mode`            | `"unified" \| "split" \| "inline"` | `"unified"` |
| `context`         | `number`                           | `3`         |
| `showLineNumbers` | `boolean`                          | `false`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Visual output exposes its meaningful value through a textual alternative or bounded accessible summary.


# Directory Tree

Filesystem browser with expand/collapse



<ComponentPreview base="ink" name="directory-tree-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/directory-tree
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="directory-tree" title="components/ui/directory-tree.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DirectoryTree } from "@/components/ui/directory-tree";
```

```tsx
<DirectoryTree
  rootPath="/home/user/project"
  maxDepth={3}
  label="Project Files"
/>
```

API Reference [#api-reference]

DirectoryTree [#directorytree]

| Prop         | Type                     | Default         |
| ------------ | ------------------------ | --------------- |
| `rootPath`   | `string`                 | `process.cwd()` |
| `onSelect`   | `(path: string) => void` | -               |
| `maxDepth`   | `number`                 | `2`             |
| `showHidden` | `boolean`                | `false`         |
| `label`      | `string`                 | -               |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Git Status

Git status display (branch, staged, modified, ahead/behind)



<ComponentPreview base="ink" name="git-status-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/git-status
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource base="ink" name="git-status" title="components/ui/git-status.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { GitStatus } from "@/components/ui/git-status";
```

```tsx
<GitStatus branch="main" staged={2} modified={5} ahead={1} behind={0} />
```

API Reference [#api-reference]

GitStatus [#gitstatus]

| Prop       | Type     | Default    |
| ---------- | -------- | ---------- |
| `branch`   | `string` | `required` |
| `staged`   | `number` | `0`        |
| `modified` | `number` | `0`        |
| `ahead`    | `number` | `0`        |
| `behind`   | `number` | `0`        |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Data

Components for displaying and visualizing structured data in the terminal.



<ComponentsList category="data" />


# JSON

Pretty-printed JSON with collapsible nodes



<ComponentPreview base="ink" name="json-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/json
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="json" title="components/ui/json.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { JSONView } from "@/components/ui/json";
```

```tsx
<JSONView
  label="package.json"
  data={{
    name: "my-cli",
    version: "1.0.0",
    dependencies: { ink: "^5.0.0" },
  }}
/>
```

API Reference [#api-reference]

JSONView [#jsonview]

| Prop        | Type      | Default    |
| ----------- | --------- | ---------- |
| `data`      | `unknown` | `required` |
| `indent`    | `number`  | `2`        |
| `collapsed` | `boolean` | `false`    |
| `label`     | `string`  | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Key Value

Aligned key–value pairs



<ComponentPreview base="ink" name="key-value-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/key-value
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="ink" name="key-value" title="components/ui/key-value.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { KeyValue } from "@/components/ui/key-value";
```

```tsx
<KeyValue
  items={[
    { key: "Name", value: "my-app" },
    { key: "Version", value: "2.1.0" },
    { key: "License", value: "MIT" },
  ]}
/>
```

API Reference [#api-reference]

KeyValue [#keyvalue]

| Prop         | Type             | Default    |
| ------------ | ---------------- | ---------- |
| `items`      | `KeyValueItem[]` | `required` |
| `keyWidth`   | `number`         | -          |
| `separator`  | `string`         | `":"`      |
| `keyColor`   | `string`         | -          |
| `valueColor` | `string`         | -          |

KeyValueItem [#keyvalueitem]

| Prop    | Type        | Default    |
| ------- | ----------- | ---------- |
| `key`   | `string`    | `required` |
| `value` | `ReactNode` | `required` |
| `color` | `string`    | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# List

Navigable list with optional filtering



<ComponentPreview base="ink" name="list-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/list
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="list" title="components/ui/list.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { List } from "@/components/ui/list";
```

```tsx
<List
  items={[
    { key: "ts", label: "TypeScript", description: "Typed JavaScript" },
    { key: "rs", label: "Rust", description: "Systems language" },
    { key: "go", label: "Go", description: "Cloud-native language" },
  ]}
  onSelect={(item) => console.log(item.key)}
/>
```

API Reference [#api-reference]

List [#list]

| Prop         | Type                       | Default    |
| ------------ | -------------------------- | ---------- |
| `items`      | `ListItem[]`               | `required` |
| `onSelect`   | `(item: ListItem) => void` | -          |
| `filterable` | `boolean`                  | `false`    |
| `height`     | `number`                   | `10`       |
| `cursor`     | `string`                   | `"›"`      |

ListItem [#listitem]

| Prop          | Type     | Default    |
| ------------- | -------- | ---------- |
| `key`         | `string` | `required` |
| `label`       | `string` | `required` |
| `description` | `string` | -          |
| `color`       | `string` | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Table

Sortable, selectable, paginated data table



<ComponentPreview base="ink" name="table-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/table
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="table" title="components/ui/table.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Table } from "@/components/ui/table";
```

```tsx
<Table
  data={[
    { name: "api-server", cpu: "24%", memory: "512 MB" },
    { name: "worker", cpu: "58%", memory: "1.2 GB" },
  ]}
  columns={[
    { key: "name", header: "Service" },
    { key: "cpu", header: "CPU", align: "right" },
    { key: "memory", header: "Memory", align: "right" },
  ]}
/>
```

Examples [#examples]

Sortable [#sortable]

Enable keyboard-driven column sorting with `sortable`. Use arrow keys to navigate columns and press `s` to sort.

<ComponentPreview base="ink" name="table-sortable" />

Selectable rows [#selectable-rows]

Use `selectable` with `onSelect` to choose a row with the arrow keys and Enter.

<ComponentPreview base="ink" name="table-selectable" />

API Reference [#api-reference]

Table [#table]

The table draws a fixed-width grid with Unicode box-drawing characters (`╭`, `├`, `│`, …). Width follows column content; it does not stretch to the full terminal width.

| Prop          | Type               | Default    |
| ------------- | ------------------ | ---------- |
| `data`        | `T[]`              | `required` |
| `columns`     | `Column<T>[]`      | `required` |
| `sortable`    | `boolean`          | `false`    |
| `selectable`  | `boolean`          | `false`    |
| `onSelect`    | `(row: T) => void` | -          |
| `maxRows`     | `number`           | `20`       |
| `borderColor` | `string`           | -          |

Column [#column]

| Prop     | Type                            | Default    |
| -------- | ------------------------------- | ---------- |
| `key`    | `keyof T & string`              | `required` |
| `header` | `string`                        | `required` |
| `width`  | `number`                        | -          |
| `align`  | `"left" \| "right" \| "center"` | `"left"`   |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Tree

Expandable/collapsible tree view



<ComponentPreview base="ink" name="tree-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tree
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="tree" title="components/ui/tree.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tree } from "@/components/ui/tree";
```

```tsx
<Tree
  defaultExpanded={["src"]}
  nodes={[
    {
      key: "src",
      label: "src",
      children: [
        { key: "index", label: "index.ts" },
        { key: "utils", label: "utils.ts" },
      ],
    },
    { key: "pkg", label: "package.json" },
  ]}
/>
```

API Reference [#api-reference]

Tree [#tree]

| Prop              | Type                       | Default    |
| ----------------- | -------------------------- | ---------- |
| `nodes`           | `TreeNode[]`               | `required` |
| `onSelect`        | `(node: TreeNode) => void` | -          |
| `defaultExpanded` | `string[]`                 | `[]`       |
| `expandedIcon`    | `string`                   | `"▼"`      |
| `collapsedIcon`   | `string`                   | `"▶"`      |
| `leafIcon`        | `string`                   | `"•"`      |

TreeNode [#treenode]

| Prop       | Type         | Default    |
| ---------- | ------------ | ---------- |
| `key`      | `string`     | `required` |
| `label`    | `string`     | `required` |
| `children` | `TreeNode[]` | -          |
| `icon`     | `string`     | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Virtual List

Virtualized list for 10k+ items



<ComponentPreview base="ink" name="virtual-list-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/virtual-list
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="virtual-list" title="components/ui/virtual-list.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { VirtualList } from "@/components/ui/virtual-list";
```

```tsx
<VirtualList
  items={Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`)}
  height={10}
  renderItem={(item, index, isActive) => <Text bold={isActive}>{item}</Text>}
/>
```

API Reference [#api-reference]

VirtualList [#virtuallist]

| Prop         | Type                                                       | Default    |
| ------------ | ---------------------------------------------------------- | ---------- |
| `items`      | `T[]`                                                      | `required` |
| `renderItem` | `(item: T, index: number, isActive: boolean) => ReactNode` | `required` |
| `height`     | `number`                                                   | `required` |
| `onSelect`   | `(item: T, index: number) => void`                         | -          |
| `cursor`     | `string`                                                   | -          |
| `overscan`   | `number`                                                   | `2`        |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Alert

Alert box with success/error/warning/info variants



<ComponentPreview base="ink" name="alert-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/alert
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="alert" title="components/ui/alert.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Alert } from "@/components/ui/alert";
```

```tsx
<Alert variant="success" title="Build complete">
  Everything is ready to ship.
</Alert>
```

Examples [#examples]

Error [#error]

Use `variant="error"` to display an error alert.

<ComponentPreview base="ink" name="alert-error" />

Warning [#warning]

Use `variant="warning"` to display a warning alert.

<ComponentPreview base="ink" name="alert-warning" />

Without Border [#without-border]

Set `bordered={false}` to remove the border.

<ComponentPreview base="ink" name="alert-no-border" />

Custom Icon and Color [#custom-icon-and-color]

Override the icon and color with `icon` and `color` props.

<ComponentPreview base="ink" name="alert-custom" />

API Reference [#api-reference]

Alert [#alert]

| Prop          | Type                                                                                         | Default  |
| ------------- | -------------------------------------------------------------------------------------------- | -------- |
| `variant`     | `"success" \| "error" \| "warning" \| "info"`                                                | `"info"` |
| `title`       | `string`                                                                                     | -        |
| `children`    | `ReactNode`                                                                                  | -        |
| `icon`        | `string`                                                                                     | -        |
| `bordered`    | `boolean`                                                                                    | `true`   |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | -        |
| `color`       | `string`                                                                                     | -        |
| `paddingX`    | `number`                                                                                     | `1`      |
| `paddingY`    | `number`                                                                                     | `0`      |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Banner

Full-width announcement banner



<ComponentPreview base="ink" name="banner-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/banner
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="banner" title="components/ui/banner.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Banner } from "@/components/ui/banner";
```

```tsx
<Banner variant="info" title="Update">
  A new version is available. Run npx update to upgrade.
</Banner>
```

Examples [#examples]

Success Banner [#success-banner]

<ComponentPreview base="ink" name="banner-success" />

Error with Custom Icon [#error-with-custom-icon]

<ComponentPreview base="ink" name="banner-error" />

API Reference [#api-reference]

Banner [#banner]

| Prop          | Type                                                       | Default    |
| ------------- | ---------------------------------------------------------- | ---------- |
| `children`    | `ReactNode`                                                | `required` |
| `variant`     | `"info" \| "warning" \| "error" \| "success" \| "neutral"` | `"info"`   |
| `icon`        | `string`                                                   | -          |
| `title`       | `string`                                                   | -          |
| `dismissible` | `boolean`                                                  | `false`    |
| `onDismiss`   | `() => void`                                               | -          |
| `color`       | `string`                                                   | -          |
| `accentChar`  | `string`                                                   | `"┃"`      |
| `gap`         | `number`                                                   | `1`        |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Feedback

Components for showing progress, status, and notifications in the terminal.



<ComponentsList category="feedback" />


# Multi Progress

Parallel progress display for package managers, build pipelines, and deploy tools



<ComponentPreview base="ink" name="multi-progress-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/multi-progress
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource base="ink" name="multi-progress" title="components/ui/multi-progress.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { MultiProgress } from "@/components/ui/multi-progress";
```

```tsx
<MultiProgress
  items={[
    {
      id: "api",
      label: "API Server",
      value: 80,
      total: 100,
      status: "running",
    },
    { id: "db", label: "Database", value: 100, total: 100, status: "done" },
    { id: "cache", label: "Redis", value: 30, total: 100, status: "running" },
  ]}
/>
```

Examples [#examples]

Compact Mode [#compact-mode]

<ComponentPreview base="ink" name="multi-progress-compact" />

API Reference [#api-reference]

MultiProgress [#multiprogress]

| Prop          | Type                  | Default    |
| ------------- | --------------------- | ---------- |
| `items`       | `MultiProgressItem[]` | `required` |
| `barWidth`    | `number`              | `20`       |
| `labelWidth`  | `number`              | `20`       |
| `compact`     | `boolean`             | `false`    |
| `showPercent` | `boolean`             | `true`     |

MultiProgressItem [#multiprogressitem]

| Prop         | Type                                          | Default    |
| ------------ | --------------------------------------------- | ---------- |
| `id`         | `string`                                      | `required` |
| `label`      | `string`                                      | `required` |
| `value`      | `number`                                      | `required` |
| `total`      | `number`                                      | `required` |
| `status`     | `"pending" \| "running" \| "done" \| "error"` | -          |
| `statusText` | `string`                                      | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Progress Bar

Determinate progress bar with percent and value/total display



<ComponentPreview base="ink" name="progress-bar-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/progress-bar
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="progress-bar" title="components/ui/progress-bar.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ProgressBar } from "@/components/ui/progress-bar";
```

```tsx
<ProgressBar value={42} total={100} label="Uploading" />
```

Examples [#examples]

Custom Characters and Color [#custom-characters-and-color]

<ComponentPreview base="ink" name="progress-bar-custom" />

API Reference [#api-reference]

ProgressBar [#progressbar]

| Prop          | Type      | Default    |
| ------------- | --------- | ---------- |
| `value`       | `number`  | `required` |
| `total`       | `number`  | -          |
| `width`       | `number`  | `30`       |
| `showPercent` | `boolean` | `true`     |
| `showEta`     | `boolean` | `false`    |
| `fillChar`    | `string`  | `"█"`      |
| `emptyChar`   | `string`  | `"░"`      |
| `color`       | `string`  | -          |
| `label`       | `string`  | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Progress Circle

Circular progress indicator using Unicode braille



<ComponentPreview base="ink" name="progress-circle-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/progress-circle
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="progress-circle" title="components/ui/progress-circle.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ProgressCircle } from "@/components/ui/progress-circle";
```

```tsx
<ProgressCircle value={75} size="sm" label="Memory" showPercent />
```

Examples [#examples]

Sizes [#sizes]

<ComponentPreview base="ink" name="progress-circle-sizes" />

API Reference [#api-reference]

ProgressCircle [#progresscircle]

| Prop          | Type                   | Default    |
| ------------- | ---------------------- | ---------- |
| `value`       | `number`               | `required` |
| `size`        | `"sm" \| "md" \| "lg"` | `"sm"`     |
| `color`       | `string`               | -          |
| `label`       | `string`               | -          |
| `showPercent` | `boolean`              | `false`    |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Skeleton

Shimmer loading placeholder



<ComponentPreview base="ink" name="skeleton-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/skeleton
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-animation.ts" title="hooks/use-animation.ts" />

      <ComponentSource base="ink" name="skeleton" title="components/ui/skeleton.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Skeleton } from "@/components/ui/skeleton";
```

```tsx
<Skeleton width={30} height={3} />
```

Examples [#examples]

Static (No Animation) [#static-no-animation]

<ComponentPreview base="ink" name="skeleton-static" />

API Reference [#api-reference]

Skeleton [#skeleton]

| Prop       | Type      | Default |
| ---------- | --------- | ------- |
| `width`    | `number`  | `20`    |
| `height`   | `number`  | `1`     |
| `animated` | `boolean` | `true`  |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Spinner

Animated spinner with 12+ styles



<ComponentPreview base="ink" name="spinner-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/spinner
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-animation.ts" title="hooks/use-animation.ts" />

      <ComponentSource base="ink" name="spinner" title="components/ui/spinner.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Spinner } from "@/components/ui/spinner";
```

```tsx
<Spinner type="dots" label="Loading components" />
```

Examples [#examples]

Spinner Styles [#spinner-styles]

Multiple built-in animation styles.

<ComponentPreview base="ink" name="spinner-styles" />

API Reference [#api-reference]

Spinner [#spinner]

| Prop     | Type                                                                              | Default  |
| -------- | --------------------------------------------------------------------------------- | -------- |
| `type`   | `SpinnerName` from [`cli-spinners`](https://github.com/sindresorhus/cli-spinners) | `"dots"` |
| `label`  | `string`                                                                          | -        |
| `color`  | `string`                                                                          | -        |
| `fps`    | `number` — used only with custom `frames`                                         | `12`     |
| `frames` | `string[]`                                                                        | -        |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Status Message

Inline status message with icon and color



<ComponentPreview base="ink" name="status-message-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/status-message
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="status-message" title="components/ui/status-message.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { StatusMessage } from "@/components/ui/status-message";
```

```tsx
<StatusMessage variant="success">All tests passed.</StatusMessage>
```

Examples [#examples]

Variants [#variants]

<ComponentPreview base="ink" name="status-message-variants" />

API Reference [#api-reference]

StatusMessage [#statusmessage]

| Prop       | Type                                                                    | Default    |
| ---------- | ----------------------------------------------------------------------- | ---------- |
| `variant`  | `"success" \| "error" \| "warning" \| "info" \| "loading" \| "pending"` | `"info"`   |
| `children` | `ReactNode`                                                             | `required` |
| `icon`     | `string`                                                                | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Toast

Auto-dismissing toast notification



<ComponentPreview base="ink" name="toast-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/toast
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interval.ts" title="hooks/use-interval.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="toast" title="components/ui/toast.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Toast } from "@/components/ui/toast";
```

```tsx
<Toast
  variant="success"
  message="Settings saved successfully."
  duration={5000}
  onDismiss={() => console.log("toast closed")}
/>
```

Examples [#examples]

Error with Longer Duration [#error-with-longer-duration]

<ComponentPreview base="ink" name="toast-error" />

API Reference [#api-reference]

Toast [#toast]

| Prop        | Type                                          | Default    |
| ----------- | --------------------------------------------- | ---------- |
| `message`   | `string`                                      | `required` |
| `variant`   | `"success" \| "error" \| "warning" \| "info"` | `"info"`   |
| `duration`  | `number`                                      | `3000`     |
| `onDismiss` | `() => void`                                  | -          |
| `icon`      | `string`                                      | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Confirm

Yes/No confirmation prompt



<ComponentPreview base="ink" name="confirm-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/confirm
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="confirm" title="components/ui/confirm.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Confirm } from "@/components/ui/confirm";
```

```tsx
<Confirm
  message="Are you sure you want to continue?"
  onConfirm={() => console.log("Confirmed")}
  onCancel={() => console.log("Cancelled")}
/>
```

API Reference [#api-reference]

Confirm [#confirm]

| Prop           | Type                    | Default     |
| -------------- | ----------------------- | ----------- |
| `message`      | `string`                | `required`  |
| `onConfirm`    | `() => void`            | -           |
| `onCancel`     | `() => void`            | -           |
| `confirmLabel` | `string`                | `"Yes"`     |
| `cancelLabel`  | `string`                | `"No"`      |
| `defaultValue` | `boolean`               | `false`     |
| `variant`      | `"default" \| "danger"` | `"default"` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Date Picker

Calendar date picker with keyboard navigation



<ComponentPreview base="ink" name="date-picker-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/date-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="date-picker" title="components/ui/date-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DatePicker } from "@/components/ui/date-picker";
```

```tsx
<DatePicker
  label="Birth date"
  value={new Date(2026, 0, 15)}
  onChange={(date) => console.log("Selected:", date)}
  onSubmit={(date) => console.log("Submitted:", date)}
/>
```

API Reference [#api-reference]

DatePicker [#datepicker]

| Prop        | Type                   | Default |
| ----------- | ---------------------- | ------- |
| `value`     | `Date`                 | -       |
| `onChange`  | `(date: Date) => void` | -       |
| `onSubmit`  | `(date: Date) => void` | -       |
| `label`     | `string`               | -       |
| `minDate`   | `Date`                 | -       |
| `maxDate`   | `Date`                 | -       |
| `autoFocus` | `boolean`              | `false` |
| `id`        | `string`               | -       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# File Picker

Interactive file browser and picker



<ComponentPreview base="ink" name="file-picker-demo" />

<Callout type="info">
  File picker requires Node.js filesystem access and may not render in the
  browser preview.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/file-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="file-picker" title="components/ui/file-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { FilePicker } from "@/components/ui/file-picker";
```

```tsx
<FilePicker
  label="Select a config file"
  extensions={[".json", ".yaml", ".yml"]}
  onSubmit={(path) => console.log("Selected:", path)}
/>
```

API Reference [#api-reference]

FilePicker [#filepicker]

| Prop         | Type                     | Default         |
| ------------ | ------------------------ | --------------- |
| `value`      | `string`                 | -               |
| `onChange`   | `(path: string) => void` | -               |
| `onSubmit`   | `(path: string) => void` | -               |
| `label`      | `string`                 | -               |
| `startDir`   | `string`                 | `process.cwd()` |
| `extensions` | `string[]`               | -               |
| `dirsOnly`   | `boolean`                | `false`         |
| `autoFocus`  | `boolean`                | `false`         |
| `id`         | `string`                 | -               |
| `width`      | `number`                 | `50`            |
| `maxVisible` | `number`                 | `8`             |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Form Field

Form field wrapper with label, hint, and error



<ComponentPreview base="ink" name="form-field-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/form-field
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="form-field" title="components/ui/form-field.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { FormField } from "@/components/ui/form-field";
```

```tsx
<FormField label="Username" hint="Must be unique" required>
  <Text>my-input-here</Text>
</FormField>
```

API Reference [#api-reference]

FormField [#formfield]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `label`      | `string`    | `required` |
| `children`   | `ReactNode` | `required` |
| `error`      | `string`    | -          |
| `hint`       | `string`    | -          |
| `required`   | `boolean`   | -          |
| `gap`        | `number`    | `0`        |
| `errorIcon`  | `string`    | `"✗"`      |
| `labelColor` | `string`    | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Form

Form container with validation, Ctrl+S submit, and dirty tracking



<ComponentPreview base="ink" name="form-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/form
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="form" title="components/ui/form.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Form } from "@/components/ui/form";
```

```tsx
<Form
  initialValues={{ name: "", email: "" }}
  fields={[
    { name: "name", validate: (v) => (v ? null : "Name is required") },
    { name: "email", validate: (v) => (v ? null : "Email is required") },
  ]}
  onSubmit={(values) => console.log("Submitted:", values)}
>
  <Text>Name and email form (Ctrl+S to submit)</Text>
</Form>
```

API Reference [#api-reference]

Form [#form]

| Prop            | Type                                        | Default    |
| --------------- | ------------------------------------------- | ---------- |
| `onSubmit`      | `(values: Record<string, unknown>) => void` | `required` |
| `initialValues` | `Record<string, unknown>`                   | `{}`       |
| `fields`        | `FormField[]`                               | `[]`       |
| `children`      | `ReactNode`                                 | `required` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Ctrl+S` validates and submits the form; `Escape` cancels it. Invalid submission focuses the first invalid field.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Forms

Components for building multi-step forms and handling user submissions.



<ComponentsList category="forms" />


# Time Picker

Time picker with hour/minute/second spinners



<ComponentPreview base="ink" name="time-picker-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/time-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="time-picker" title="components/ui/time-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TimePicker } from "@/components/ui/time-picker";
```

```tsx
<TimePicker
  label="Meeting time"
  value={{ hours: 14, minutes: 30 }}
  onChange={(time) => console.log("Changed:", time)}
  onSubmit={(time) => console.log("Submitted:", time)}
/>
```

API Reference [#api-reference]

TimePicker [#timepicker]

| Prop        | Type                                                 | Default |
| ----------- | ---------------------------------------------------- | ------- |
| `value`     | `{ hours: number; minutes: number }`                 | -       |
| `onChange`  | `(time: { hours: number; minutes: number }) => void` | -       |
| `onSubmit`  | `(time: { hours: number; minutes: number }) => void` | -       |
| `label`     | `string`                                             | -       |
| `format`    | `12 \| 24`                                           | `24`    |
| `autoFocus` | `boolean`                                            | `false` |
| `id`        | `string`                                             | -       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Wizard

Multi-step wizard with per-step validation



<ComponentPreview base="ink" name="wizard-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/wizard
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="wizard" title="components/ui/wizard.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Wizard } from "@/components/ui/wizard";
```

```tsx
<Wizard
  steps={[
    {
      key: "install",
      title: "Install",
      content: <Text>Install dependencies</Text>,
    },
    {
      key: "configure",
      title: "Configure",
      content: <Text>Set up your preferences</Text>,
    },
    {
      key: "finish",
      title: "Finish",
      content: <Text>Review and confirm your settings</Text>,
    },
  ]}
  onComplete={(keys) => console.log("Completed:", keys)}
  onCancel={() => console.log("Cancelled")}
/>
```

API Reference [#api-reference]

Wizard [#wizard]

| Prop           | Type                                 | Default    |
| -------------- | ------------------------------------ | ---------- |
| `steps`        | `WizardStep[]`                       | `required` |
| `onComplete`   | `(completedSteps: string[]) => void` | -          |
| `onCancel`     | `() => void`                         | -          |
| `showProgress` | `boolean`                            | `true`     |

WizardStep [#wizardstep]

| Prop       | Type                      | Default    |
| ---------- | ------------------------- | ---------- |
| `key`      | `string`                  | `required` |
| `title`    | `string`                  | `required` |
| `content`  | `ReactNode`               | `required` |
| `validate` | `() => boolean \| string` | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Email Input

Email input with validation and domain suggestions



<ComponentPreview base="ink" name="email-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/email-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="email-input" title="components/ui/email-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { EmailInput } from "@/components/ui/email-input";
```

```tsx
<EmailInput
  label="Email"
  placeholder="you@example.com"
  onSubmit={(value) => console.log("Submitted:", value)}
/>
```

API Reference [#api-reference]

EmailInput [#emailinput]

| Prop          | Type                      | Default                                                    |
| ------------- | ------------------------- | ---------------------------------------------------------- |
| `value`       | `string`                  | -                                                          |
| `onChange`    | `(value: string) => void` | -                                                          |
| `onSubmit`    | `(value: string) => void` | -                                                          |
| `label`       | `string`                  | -                                                          |
| `placeholder` | `string`                  | `"you@example.com"`                                        |
| `autoFocus`   | `boolean`                 | `false`                                                    |
| `id`          | `string`                  | -                                                          |
| `width`       | `number`                  | `40`                                                       |
| `suggestions` | `string[]`                | `["gmail.com", "yahoo.com", "hotmail.com", "outlook.com"]` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Input

Text input components for capturing user input in the terminal.



<ComponentsList category="input" />


# Masked Input

Masked input for phone, date, credit card formats



<ComponentPreview base="ink" name="masked-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/masked-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="masked-input" title="components/ui/masked-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { MaskedInput } from "@/components/ui/masked-input";
```

```tsx
<MaskedInput
  mask="(###) ###-####"
  label="Phone Number"
  placeholder="(555) 123-4567"
/>
```

API Reference [#api-reference]

MaskedInput [#maskedinput]

| Prop          | Type                      | Default    |
| ------------- | ------------------------- | ---------- |
| `mask`        | `string`                  | `required` |
| `value`       | `string`                  | -          |
| `onChange`    | `(value: string) => void` | -          |
| `onSubmit`    | `(value: string) => void` | -          |
| `label`       | `string`                  | -          |
| `placeholder` | `string`                  | -          |
| `autoFocus`   | `boolean`                 | `false`    |
| `id`          | `string`                  | -          |
| `width`       | `number`                  | `40`       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Number Input

Numeric input with increment/decrement and bounds



<ComponentPreview base="ink" name="number-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/number-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="number-input" title="components/ui/number-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { NumberInput } from "@/components/ui/number-input";
```

```tsx
<NumberInput
  label="Quantity"
  min={0}
  max={100}
  step={1}
  onChange={(value) => console.log("Value:", value)}
/>
```

API Reference [#api-reference]

NumberInput [#numberinput]

| Prop          | Type                                                                                         | Default                  |
| ------------- | -------------------------------------------------------------------------------------------- | ------------------------ |
| `value`       | `number`                                                                                     | -                        |
| `onChange`    | `(value: number) => void`                                                                    | -                        |
| `onSubmit`    | `(value: number) => void`                                                                    | -                        |
| `min`         | `number`                                                                                     | -                        |
| `max`         | `number`                                                                                     | -                        |
| `step`        | `number`                                                                                     | `1`                      |
| `placeholder` | `string`                                                                                     | `""`                     |
| `label`       | `string`                                                                                     | -                        |
| `id`          | `string`                                                                                     | -                        |
| `format`      | `(n: number) => string`                                                                      | -                        |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`                |
| `paddingX`    | `number`                                                                                     | `1`                      |
| `cursor`      | `string`                                                                                     | `"█"`                    |
| `stepHint`    | `string`                                                                                     | `"↑ +{step}  ↓ -{step}"` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Password Input

Password input with masked characters and reveal toggle



<ComponentPreview base="ink" name="password-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/password-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="password-input" title="components/ui/password-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { PasswordInput } from "@/components/ui/password-input";
```

```tsx
<PasswordInput
  label="Password"
  placeholder="Enter password"
  showToggle
  onSubmit={(value) => console.log("Password:", value)}
/>
```

API Reference [#api-reference]

PasswordInput [#passwordinput]

| Prop          | Type                                                                                         | Default   |
| ------------- | -------------------------------------------------------------------------------------------- | --------- |
| `value`       | `string`                                                                                     | -         |
| `onChange`    | `(value: string) => void`                                                                    | -         |
| `onSubmit`    | `(value: string) => void`                                                                    | -         |
| `placeholder` | `string`                                                                                     | `""`      |
| `mask`        | `string`                                                                                     | `"●"`     |
| `showToggle`  | `boolean`                                                                                    | `false`   |
| `label`       | `string`                                                                                     | -         |
| `id`          | `string`                                                                                     | -         |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`    | `number`                                                                                     | `1`       |
| `width`       | `number`                                                                                     | -         |
| `cursor`      | `string`                                                                                     | `"█"`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Path Input

Filesystem path input with tab autocomplete



<ComponentPreview base="ink" name="path-input-demo" />

<Callout type="info">
  Path input requires Node.js filesystem access and may not render in the
  browser preview.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/path-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="path-input" title="components/ui/path-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { PathInput } from "@/components/ui/path-input";
```

```tsx
<PathInput
  label="Project Directory"
  placeholder="/home/user/projects"
  onSubmit={(path) => console.log("Selected:", path)}
/>
```

API Reference [#api-reference]

PathInput [#pathinput]

| Prop          | Type                      | Default |
| ------------- | ------------------------- | ------- |
| `value`       | `string`                  | -       |
| `onChange`    | `(value: string) => void` | -       |
| `onSubmit`    | `(value: string) => void` | -       |
| `label`       | `string`                  | -       |
| `placeholder` | `string`                  | `"/"`   |
| `autoFocus`   | `boolean`                 | `false` |
| `id`          | `string`                  | -       |
| `width`       | `number`                  | `40`    |
| `filter`      | `string`                  | -       |
| `dirsOnly`    | `boolean`                 | `false` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Search Input

Fuzzy search input with autocomplete



<ComponentPreview base="ink" name="search-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/search-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="search-input" title="components/ui/search-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { SearchInput } from "@/components/ui/search-input";
```

```tsx
<SearchInput
  autoFocus
  label="Search Packages"
  options={["react", "vue", "svelte", "angular", "solid"]}
  placeholder="Search..."
  onSelect={(item) => console.log("Selected:", item)}
/>
```

API Reference [#api-reference]

SearchInput [#searchinput]

| Prop            | Type                                                                                         | Default       |
| --------------- | -------------------------------------------------------------------------------------------- | ------------- |
| `options`       | `T[]`                                                                                        | -             |
| `getValue`      | `(item: T) => string`                                                                        | -             |
| `value`         | `string`                                                                                     | -             |
| `defaultValue`  | `string`                                                                                     | `""`          |
| `onValueChange` | `(query: string) => void`                                                                    | -             |
| `onChange`      | `(query: string) => void`                                                                    | -             |
| `onSelect`      | `(item: T) => void`                                                                          | -             |
| `placeholder`   | `string`                                                                                     | `"Search..."` |
| `label`         | `string`                                                                                     | -             |
| `maxResults`    | `number`                                                                                     | `5`           |
| `id`            | `string`                                                                                     | -             |
| `borderStyle`   | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`     |
| `paddingX`      | `number`                                                                                     | `1`           |
| `cursor`        | `string`                                                                                     | `"█"`         |
| `cursorOrigin`  | `{x: number; y: number}`                                                                     | -             |
| `searchIcon`    | `string`                                                                                     | `"🔍 "`       |
| `resultCursor`  | `string`                                                                                     | `"› "`        |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Text Area

Multi-line text editor with word wrap



<ComponentPreview base="ink" name="text-area-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/text-area
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="text-area" title="components/ui/text-area.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TextArea } from "@/components/ui/text-area";
```

```tsx
<TextArea
  label="Description"
  placeholder="Enter a description..."
  rows={4}
  onSubmit={(value) => console.log("Submitted:", value)}
/>
```

API Reference [#api-reference]

TextArea [#textarea]

| Prop          | Type                                                                                         | Default   |
| ------------- | -------------------------------------------------------------------------------------------- | --------- |
| `value`       | `string`                                                                                     | -         |
| `onChange`    | `(value: string) => void`                                                                    | -         |
| `onSubmit`    | `(value: string) => void`                                                                    | -         |
| `placeholder` | `string`                                                                                     | `""`      |
| `rows`        | `number`                                                                                     | `4`       |
| `label`       | `string`                                                                                     | -         |
| `id`          | `string`                                                                                     | -         |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`    | `number`                                                                                     | `1`       |
| `cursor`      | `string`                                                                                     | `"█"`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Text Input

Single-line text input with placeholder, validation, mask



<ComponentPreview base="ink" name="text-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/text-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="text-input" title="components/ui/text-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TextInput } from "@/components/ui/text-input";
```

```tsx
<TextInput
  label="Project Name"
  placeholder="my-project"
  onSubmit={(value) => console.log("Name:", value)}
/>
```

Examples [#examples]

Placeholder [#placeholder]

A text input with placeholder text.

<ComponentPreview base="ink" name="text-input-placeholder" />

With Label [#with-label]

Multiple labeled inputs stacked together.

<ComponentPreview base="ink" name="text-input-label" />

Cursor and editing [#cursor-and-editing]

With `showCursor` (default `true`), use the left and right arrow keys to move the insertion point; type and Backspace apply at the cursor.

<ComponentPreview base="ink" name="text-input-cursor" />

API Reference [#api-reference]

TextInput [#textinput]

| Prop                  | Type                                                                                         | Default   |
| --------------------- | -------------------------------------------------------------------------------------------- | --------- |
| `value`               | `string`                                                                                     | -         |
| `onChange`            | `(value: string) => void`                                                                    | -         |
| `onSubmit`            | `(value: string) => void`                                                                    | -         |
| `placeholder`         | `string`                                                                                     | `""`      |
| `mask`                | `string`                                                                                     | -         |
| `showCursor`          | `boolean`                                                                                    | `true`    |
| `highlightPastedText` | `boolean`                                                                                    | `false`   |
| `validate`            | `(value: string) => string\|null`                                                            | -         |
| `width`               | `number`                                                                                     | `40`      |
| `label`               | `string`                                                                                     | -         |
| `autoFocus`           | `boolean`                                                                                    | `false`   |
| `id`                  | `string`                                                                                     | -         |
| `bordered`            | `boolean`                                                                                    | `true`    |
| `borderStyle`         | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`            | `number`                                                                                     | `1`       |
| `cursor`              | `string`                                                                                     | `"█"`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Aspect Ratio

Constrains children to a given aspect ratio



<ComponentPreview base="ink" name="aspect-ratio-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/aspect-ratio
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource base="ink" name="aspect-ratio" title="components/ui/aspect-ratio.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio";
```

```tsx
<AspectRatio ratio={16 / 9} width={60}>
  <Text>Widescreen content</Text>
</AspectRatio>
```

API Reference [#api-reference]

AspectRatio [#aspectratio]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |
| `ratio`    | `number`    | `16 / 9`   |
| `width`    | `number`    | `80`       |


# Box

Enhanced flexbox container with theme-aware borders



<ComponentPreview base="ink" name="box-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/box
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="box" title="components/ui/box.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Box } from "@/components/ui/box";
```

```tsx
<Box border borderVariant="focus" padding={1}>
  <Text>Focused container</Text>
</Box>
```

API Reference [#api-reference]

Box [#box]

| Prop            | Type                                                                   | Default     |
| --------------- | ---------------------------------------------------------------------- | ----------- |
| `border`        | `boolean`                                                              | -           |
| `borderVariant` | `"default" \| "muted" \| "focus" \| "success" \| "error" \| "warning"` | `"default"` |
| `borderColor`   | `string`                                                               | -           |
| `children`      | `ReactNode`                                                            | -           |
| `...props`      | `InkBoxProps`                                                          | —           |


# Center

Centers children horizontally and vertically



<ComponentPreview base="ink" name="center-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/center
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource base="ink" name="center" title="components/ui/center.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Center } from "@/components/ui/center";
```

```tsx
<Center>
  <Text>Centered content</Text>
</Center>
```

API Reference [#api-reference]

Center [#center]

| Prop       | Type                                   | Default    |
| ---------- | -------------------------------------- | ---------- |
| `children` | `ReactNode`                            | `required` |
| `axis`     | `"both" \| "horizontal" \| "vertical"` | `"both"`   |


# Columns

Multi-column layout with configurable widths



<ComponentPreview base="ink" name="columns-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/columns
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource base="ink" name="columns" title="components/ui/columns.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Columns } from "@/components/ui/columns";
```

```tsx
<Columns gap={2} align="center">
  <Text>Left</Text>
  <Text>Right</Text>
</Columns>
```

API Reference [#api-reference]

Columns [#columns]

| Prop       | Type                            | Default    |
| ---------- | ------------------------------- | ---------- |
| `children` | `ReactNode`                     | `required` |
| `gap`      | `number`                        | `0`        |
| `align`    | `"top" \| "center" \| "bottom"` | `"top"`    |


# Divider

Horizontal or vertical divider / rule



<ComponentPreview base="ink" name="divider-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/divider
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="divider" title="components/ui/divider.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Divider } from "@/components/ui/divider";
```

```tsx
<Divider label="Section" />
```

Examples [#examples]

Vertical rule and label styling [#vertical-rule-and-label-styling]

Use `dividerChar` and `height` for vertical rules; `titlePadding` and `labelColor` adjust the labeled horizontal variant.

<ComponentPreview base="ink" name="divider-custom" />

API Reference [#api-reference]

Divider [#divider]

| Prop           | Type                             | Default        |
| -------------- | -------------------------------- | -------------- |
| `variant`      | `"single" \| "double" \| "bold"` | `"single"`     |
| `orientation`  | `"horizontal" \| "vertical"`     | `"horizontal"` |
| `color`        | `string`                         | -              |
| `label`        | `string`                         | -              |
| `labelColor`   | `string`                         | -              |
| `dividerChar`  | `string`                         | -              |
| `titlePadding` | `number`                         | `1`            |
| `padding`      | `number`                         | `0`            |
| `height`       | `number`                         | `1`            |
| `width`        | `number \| "auto"`               | `"auto"`       |

On horizontal dividers, the rule still uses Ink’s top border on flex-grown segments; `dividerChar` applies to **vertical** orientation.

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Grid

Rows × columns grid layout



<ComponentPreview base="ink" name="grid-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/grid
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource base="ink" name="grid" title="components/ui/grid.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Grid } from "@/components/ui/grid";
```

```tsx
<Grid columns={3} gap={1}>
  <Text>A</Text>
  <Text>B</Text>
  <Text>C</Text>
  <Text>D</Text>
  <Text>E</Text>
  <Text>F</Text>
</Grid>
```

API Reference [#api-reference]

Grid [#grid]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `columns`  | `number`    | `required` |
| `gap`      | `number`    | `0`        |
| `children` | `ReactNode` | `required` |


# Layout

Components for structuring and positioning content in your terminal UI.



<ComponentsList category="layout" />


# Scroll View

Scrollable container with scrollbar



<ComponentPreview base="ink" name="scroll-view-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/scroll-view
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="scroll-view" title="components/ui/scroll-view.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ScrollView } from "@/components/ui/scroll-view";
```

```tsx
<ScrollView height={5} contentHeight={20}>
  <Text>Line 1</Text>
  <Text>Line 2</Text>
  <Text>Line 3</Text>
</ScrollView>
```

Examples [#examples]

Scrollbar and keys [#scrollbar-and-keys]

Set `contentHeight` to the total line count of scrollable content so the thumb size reflects how much is hidden. Use arrow keys, Page Up/Down, Home, and End to scroll.

<ComponentPreview base="ink" name="scroll-view-scrollbar" />

API Reference [#api-reference]

ScrollView [#scrollview]

| Prop             | Type        | Default    |
| ---------------- | ----------- | ---------- |
| `height`         | `number`    | `required` |
| `children`       | `ReactNode` | `required` |
| `contentHeight`  | `number`    | `0`        |
| `showScrollbar`  | `boolean`   | `true`     |
| `scrollbarColor` | `string`    | -          |
| `thumbColor`     | `string`    | -          |
| `trackChar`      | `string`    | `"│"`      |
| `thumbChar`      | `string`    | `"█"`      |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Spacer

Flexible space between flex children



<ComponentPreview base="ink" name="spacer-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/spacer
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource base="ink" name="spacer" title="components/ui/spacer.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Spacer } from "@/components/ui/spacer";
```

```tsx
<Box flexDirection="row">
  <Text>Left</Text>
  <Spacer />
  <Text>Right</Text>
</Box>
```

API Reference [#api-reference]

Spacer [#spacer]

| Prop        | Type                         | Default        |
| ----------- | ---------------------------- | -------------- |
| `size`      | `number`                     | -              |
| `direction` | `"horizontal" \| "vertical"` | `"horizontal"` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Decorative output is hidden from screen readers.


# Stack

Vertical/horizontal stack with gap



<ComponentPreview base="ink" name="stack-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/stack
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource base="ink" name="stack" title="components/ui/stack.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Stack } from "@/components/ui/stack";
```

```tsx
<Stack direction="vertical" gap={1}>
  <Text>First</Text>
  <Text>Second</Text>
  <Text>Third</Text>
</Stack>
```

API Reference [#api-reference]

Stack [#stack]

| Prop             | Type                                                                          | Default      |
| ---------------- | ----------------------------------------------------------------------------- | ------------ |
| `direction`      | `"vertical" \| "horizontal"`                                                  | `"vertical"` |
| `gap`            | `number`                                                                      | `0`          |
| `children`       | `ReactNode`                                                                   | `required`   |
| `width`          | `number \| string`                                                            | -            |
| `height`         | `number \| string`                                                            | -            |
| `alignItems`     | `"flex-start" \| "center" \| "flex-end"`                                      | -            |
| `justifyContent` | `"flex-start" \| "center" \| "flex-end" \| "space-between" \| "space-around"` | -            |


# Breadcrumb

Breadcrumb navigation trail



<ComponentPreview base="ink" name="breadcrumb-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/breadcrumb
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="breadcrumb" title="components/ui/breadcrumb.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";
```

```tsx
<Breadcrumb
  items={[
    { key: "home", label: "Home", onSelect: () => {} },
    { key: "docs", label: "Docs" },
  ]}
  activeKey="docs"
/>
```

API Reference [#api-reference]

Breadcrumb [#breadcrumb]

| Prop        | Type               | Default    |
| ----------- | ------------------ | ---------- |
| `items`     | `BreadcrumbItem[]` | `required` |
| `separator` | `string`           | `"›"`      |
| `activeKey` | `string`           | -          |

BreadcrumbItem [#breadcrumbitem]

| Prop       | Type         | Default    |
| ---------- | ------------ | ---------- |
| `label`    | `string`     | `required` |
| `key`      | `string`     | `required` |
| `onSelect` | `() => void` | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Command Palette

VS Code–style command palette with fuzzy search



<ComponentPreview base="ink" name="command-palette-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/command-palette
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="command-palette" title="components/ui/command-palette.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { CommandPalette } from "@/components/ui/command-palette";
```

```tsx
<CommandPalette
  isOpen={true}
  onClose={() => setOpen(false)}
  commands={[
    { id: "save", label: "Save", onSelect: () => {} },
    { id: "quit", label: "Quit", onSelect: () => {} },
  ]}
/>
```

API Reference [#api-reference]

CommandPalette [#commandpalette]

| Prop          | Type         | Default               |
| ------------- | ------------ | --------------------- |
| `commands`    | `Command[]`  | `required`            |
| `isOpen`      | `boolean`    | `required`            |
| `onClose`     | `() => void` | `required`            |
| `placeholder` | `string`     | `"Type a command..."` |
| `maxItems`    | `number`     | `8`                   |

Command [#command]

| Prop          | Type         | Default    |
| ------------- | ------------ | ---------- |
| `id`          | `string`     | `required` |
| `label`       | `string`     | `required` |
| `description` | `string`     | -          |
| `shortcut`    | `string`     | -          |
| `onSelect`    | `() => void` | `required` |
| `group`       | `string`     | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Navigation

Components for navigating between views and content in the terminal.



<ComponentsList category="navigation" />


# Menu

Dropdown menu with nested submenus



<ComponentPreview base="ink" name="menu-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/menu
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="menu" title="components/ui/menu.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Menu } from "@/components/ui/menu";
```

```tsx
<Menu
  title="File"
  items={[
    { key: "new", label: "New File", shortcut: "⌘N" },
    { key: "save", label: "Save", shortcut: "⌘S" },
  ]}
  onSelect={(item) => console.log(item.key)}
/>
```

API Reference [#api-reference]

Menu [#menu]

| Prop       | Type                       | Default    |
| ---------- | -------------------------- | ---------- |
| `items`    | `MenuItem[]`               | `required` |
| `onSelect` | `(item: MenuItem) => void` | -          |
| `title`    | `string`                   | -          |

MenuItem [#menuitem]

| Prop        | Type         | Default    |
| ----------- | ------------ | ---------- |
| `key`       | `string`     | `required` |
| `label`     | `string`     | `required` |
| `icon`      | `string`     | -          |
| `shortcut`  | `string`     | -          |
| `disabled`  | `boolean`    | -          |
| `separator` | `boolean`    | -          |
| `children`  | `MenuItem[]` | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Pagination

Page navigation with prev/next and jump



<ComponentPreview base="ink" name="pagination-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/pagination
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="pagination" title="components/ui/pagination.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Pagination } from "@/components/ui/pagination";
```

```tsx
<Pagination total={10} current={page} onChange={(p) => setPage(p)} />
```

API Reference [#api-reference]

Pagination [#pagination]

| Prop        | Type                     | Default    |
| ----------- | ------------------------ | ---------- |
| `total`     | `number`                 | `required` |
| `current`   | `number`                 | `required` |
| `onChange`  | `(page: number) => void` | -          |
| `showEdges` | `boolean`                | `true`     |
| `siblings`  | `number`                 | `1`        |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Sidebar

Collapsible navigation sidebar panel



<ComponentPreview base="ink" name="sidebar-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/sidebar
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="sidebar" title="components/ui/sidebar.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Sidebar } from "@/components/ui/sidebar";
```

```tsx
<Sidebar
  title="Explorer"
  activeKey="inbox"
  items={[
    { key: "inbox", label: "Inbox", icon: "📥", badge: 3 },
    { key: "drafts", label: "Drafts", icon: "📝" },
  ]}
  onSelect={(key) => console.log(key)}
/>
```

API Reference [#api-reference]

Sidebar [#sidebar]

| Prop        | Type                    | Default    |
| ----------- | ----------------------- | ---------- |
| `items`     | `SidebarItem[]`         | `required` |
| `activeKey` | `string`                | -          |
| `onSelect`  | `(key: string) => void` | -          |
| `collapsed` | `boolean`               | `false`    |
| `width`     | `number`                | `20`       |
| `title`     | `string`                | -          |

SidebarItem [#sidebaritem]

| Prop       | Type               | Default    |
| ---------- | ------------------ | ---------- |
| `key`      | `string`           | `required` |
| `label`    | `string`           | `required` |
| `icon`     | `string`           | -          |
| `badge`    | `string \| number` | -          |
| `children` | `SidebarItem[]`    | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Tabbed Content

Tab bar wired to content panels



<ComponentPreview base="ink" name="tabbed-content-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tabbed-content
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="tabbed-content" title="components/ui/tabbed-content.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TabbedContent } from "@/components/ui/tabbed-content";
```

```tsx
<TabbedContent
  defaultTab="overview"
  tabs={[
    {
      id: "overview",
      label: "Overview",
      content: <Text>Overview content.</Text>,
    },
    { id: "logs", label: "Logs", content: <Text>Logs content.</Text> },
  ]}
/>
```

API Reference [#api-reference]

TabbedContent [#tabbedcontent]

| Prop          | Type                                | Default       |
| ------------- | ----------------------------------- | ------------- |
| `tabs`        | `TabbedContentTab[]`                | `required`    |
| `defaultTab`  | `string`                            | -             |
| `activeTab`   | `string`                            | -             |
| `onChange`    | `(id: string) => void`              | -             |
| `tabBarStyle` | `"underline" \| "box" \| "minimal"` | `"underline"` |

TabbedContentTab [#tabbedcontenttab]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `id`       | `string`    | `required` |
| `label`    | `string`    | `required` |
| `content`  | `ReactNode` | `required` |
| `disabled` | `boolean`   | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Tabs

Tab bar with left/right arrow and tab-key navigation



<ComponentPreview base="ink" name="tabs-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tabs
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="tabs" title="components/ui/tabs.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tabs } from "@/components/ui/tabs";
```

```tsx
<Tabs
  defaultTab="general"
  tabs={[
    {
      key: "general",
      label: "General",
      content: <Text>General settings.</Text>,
    },
    {
      key: "appearance",
      label: "Appearance",
      content: <Text>Theme config.</Text>,
    },
  ]}
/>
```

API Reference [#api-reference]

Tabs [#tabs]

| Prop             | Type                                                                                         | Default    |
| ---------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `tabs`           | `Tab[]`                                                                                      | `required` |
| `defaultTab`     | `string`                                                                                     | -          |
| `activeTab`      | `string`                                                                                     | -          |
| `onTabChange`    | `(key: string) => void`                                                                      | -          |
| `borderColor`    | `string`                                                                                     | -          |
| `borderStyle`    | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"` |
| `separator`      | `string`                                                                                     | `" │ "`    |
| `tabBarPaddingX` | `number`                                                                                     | `2`        |
| `paddingX`       | `number`                                                                                     | `1`        |
| `paddingY`       | `number`                                                                                     | `0`        |

Tab [#tab]

| Prop      | Type        | Default    |
| --------- | ----------- | ---------- |
| `key`     | `string`    | `required` |
| `label`   | `string`    | `required` |
| `content` | `ReactNode` | `required` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Dialog

Confirmation dialog with OK/Cancel actions



<ComponentPreview base="ink" name="dialog-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/dialog
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="dialog" title="components/ui/dialog.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Dialog } from "@/components/ui/dialog";
```

```tsx
<Dialog
  isOpen={true}
  title="Save changes?"
  onConfirm={() => save()}
  onCancel={() => discard()}
>
  <Text>You have unsaved changes. Would you like to save them?</Text>
</Dialog>
```

API Reference [#api-reference]

Dialog [#dialog]

| Prop           | Type                    | Default     |
| -------------- | ----------------------- | ----------- |
| `title`        | `string`                | -           |
| `children`     | `ReactNode`             | `required`  |
| `confirmLabel` | `string`                | `"OK"`      |
| `cancelLabel`  | `string`                | `"Cancel"`  |
| `onConfirm`    | `() => void`            | -           |
| `onCancel`     | `() => void`            | -           |
| `variant`      | `"default" \| "danger"` | `"default"` |
| `isOpen`       | `boolean`               | `false`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Tab` / `Shift+Tab` move through enabled controls inside the active scope; `Enter` / `Space` activate the focused control; `Escape` closes only the topmost active surface and restores focus.
* **Focus and composition:** While open, the active focus scope contains traversal, gives input ownership to the topmost scope, and restores focus when it closes.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Drawer

Slide-in panel from any edge



<ComponentPreview base="ink" name="drawer-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/drawer
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="drawer" title="components/ui/drawer.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Drawer } from "@/components/ui/drawer";
```

```tsx
<Drawer
  isOpen={true}
  edge="right"
  title="Details"
  width={40}
  onClose={() => close()}
>
  <Text>Name: my-project</Text>
  <Text>Status: active</Text>
</Drawer>
```

API Reference [#api-reference]

Drawer [#drawer]

| Prop       | Type                                     | Default    |
| ---------- | ---------------------------------------- | ---------- |
| `isOpen`   | `boolean`                                | `false`    |
| `edge`     | `"left" \| "right" \| "top" \| "bottom"` | `"right"`  |
| `title`    | `string`                                 | -          |
| `children` | `ReactNode`                              | `required` |
| `onClose`  | `() => void`                             | -          |
| `width`    | `number`                                 | `40`       |
| `height`   | `number`                                 | `10`       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Tab` / `Shift+Tab` move through enabled controls inside the active scope; `Enter` / `Space` activate the focused control; `Escape` closes only the topmost active surface and restores focus.
* **Focus and composition:** While open, the active focus scope contains traversal, gives input ownership to the topmost scope, and restores focus when it closes.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Overlays

Components for dialogs, modals, tooltips, and other overlay content.



<ComponentsList category="overlays" />


# Modal

Focus-trapped overlay modal, close with Esc



<ComponentPreview base="ink" name="modal-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/modal
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="modal" title="components/ui/modal.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Modal } from "@/components/ui/modal";
```

```tsx
<Modal open={true} onClose={() => close()} title="Welcome" width={50}>
  <Text>This is a modal dialog. Press Esc to close it.</Text>
</Modal>
```

API Reference [#api-reference]

Modal [#modal]

| Prop               | Type                                                                                         | Default                |
| ------------------ | -------------------------------------------------------------------------------------------- | ---------------------- |
| `open`             | `boolean`                                                                                    | `required`             |
| `onClose`          | `() => void`                                                                                 | `required`             |
| `title`            | `string`                                                                                     | -                      |
| `width`            | `number`                                                                                     | `60`                   |
| `children`         | `ReactNode`                                                                                  | -                      |
| `borderStyle`      | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`              |
| `borderColor`      | `string`                                                                                     | -                      |
| `paddingX`         | `number`                                                                                     | `1`                    |
| `paddingY`         | `number`                                                                                     | `0`                    |
| `titleBorderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"`             |
| `closeHint`        | `string \| false`                                                                            | `"Press Esc to close"` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Tab` / `Shift+Tab` move through enabled controls inside the active scope; `Enter` / `Space` activate the focused control; `Escape` closes only the topmost active surface and restores focus.
* **Focus and composition:** While open, the active focus scope contains traversal, gives input ownership to the topmost scope, and restores focus when it closes.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Notification Center

Persistent queue-based notification panel with useNotifications hook



<ComponentPreview base="ink" name="notification-center-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/notification-center
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/hooks/use-notifications.ts" title="hooks/use-notifications.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="notification-center" title="components/ui/notification-center.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { NotificationCenter } from "@/components/ui/notification-center";
import { useNotifications } from "@/hooks/use-notifications";
```

```tsx
const { notify } = useNotifications();

notify({
  title: "Build complete",
  body: "All checks passed",
  variant: "success",
});

<NotificationCenter maxVisible={5} width={40} />;
```

API Reference [#api-reference]

NotificationCenter [#notificationcenter]

| Prop         | Type     | Default |
| ------------ | -------- | ------- |
| `maxVisible` | `number` | `5`     |
| `width`      | `number` | `40`    |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Popover

Positioned popover with arbitrary content



<ComponentPreview base="ink" name="popover-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/popover
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="popover" title="components/ui/popover.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Popover } from "@/components/ui/popover";
```

```tsx
<Popover
  isOpen={true}
  title="Info"
  trigger={<Text bold>[?] Help</Text>}
  onClose={() => close()}
>
  <Text>Press Enter to confirm, Esc to cancel.</Text>
</Popover>
```

API Reference [#api-reference]

Popover [#popover]

| Prop       | Type         | Default    |
| ---------- | ------------ | ---------- |
| `trigger`  | `ReactNode`  | `required` |
| `children` | `ReactNode`  | `required` |
| `isOpen`   | `boolean`    | `false`    |
| `onClose`  | `() => void` | -          |
| `title`    | `string`     | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Tab` / `Shift+Tab` move through enabled controls inside the active scope; `Enter` / `Space` activate the focused control; `Escape` closes only the topmost active surface and restores focus.
* **Focus and composition:** While open, the active focus scope contains traversal, gives input ownership to the topmost scope, and restores focus when it closes.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Tooltip

Contextual tooltip on focus or hover



<ComponentPreview base="ink" name="tooltip-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tooltip
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="tooltip" title="components/ui/tooltip.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tooltip } from "@/components/ui/tooltip";
```

```tsx
<Tooltip content="Save your current progress" position="top" isVisible={true}>
  <Text bold>[S] Save</Text>
</Tooltip>
```

API Reference [#api-reference]

Tooltip [#tooltip]

| Prop          | Type                                                                                         | Default    |
| ------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `children`    | `ReactNode`                                                                                  | `required` |
| `content`     | `string`                                                                                     | `required` |
| `position`    | `"top" \| "bottom" \| "left" \| "right"`                                                     | `"top"`    |
| `isVisible`   | `boolean`                                                                                    | `false`    |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"` |
| `borderColor` | `string`                                                                                     | -          |
| `paddingX`    | `number`                                                                                     | `1`        |
| `paddingY`    | `number`                                                                                     | `0`        |
| `gap`         | `number`                                                                                     | `1`        |
| `arrowDown`   | `string`                                                                                     | `"↓"`      |
| `arrowUp`     | `string`                                                                                     | `"↑"`      |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Checkbox Group

Checkbox group with min/max selection



<ComponentPreview base="ink" name="checkbox-group-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/checkbox-group
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="checkbox-group" title="components/ui/checkbox-group.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { CheckboxGroup } from "@/components/ui/checkbox-group";
```

```tsx
<CheckboxGroup
  label="Select toppings"
  options={[
    { value: "cheese", label: "Extra Cheese" },
    { value: "pepperoni", label: "Pepperoni" },
    { value: "mushrooms", label: "Mushrooms" },
  ]}
  onChange={(values) => {}}
/>
```

API Reference [#api-reference]

CheckboxGroup [#checkboxgroup]

| Prop       | Type                         | Default    |
| ---------- | ---------------------------- | ---------- |
| `label`    | `string`                     | -          |
| `options`  | `CheckboxGroupOption[]`      | `required` |
| `value`    | `string[]`                   | -          |
| `onChange` | `(values: string[]) => void` | -          |
| `min`      | `number`                     | -          |
| `max`      | `number`                     | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Checkbox

Checkbox with indeterminate state



<ComponentPreview base="ink" name="checkbox-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/checkbox
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="checkbox" title="components/ui/checkbox.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Checkbox } from "@/components/ui/checkbox";
```

```tsx
<Checkbox checked label="Enable telemetry" onChange={(checked) => {}} />
```

API Reference [#api-reference]

Checkbox [#checkbox]

| Prop                | Type                         | Default |
| ------------------- | ---------------------------- | ------- |
| `checked`           | `boolean`                    | -       |
| `onChange`          | `(checked: boolean) => void` | -       |
| `label`             | `string`                     | -       |
| `indeterminate`     | `boolean`                    | `false` |
| `disabled`          | `boolean`                    | `false` |
| `id`                | `string`                     | -       |
| `checkedIcon`       | `string`                     | `"■"`   |
| `uncheckedIcon`     | `string`                     | `"□"`   |
| `indeterminateIcon` | `string`                     | `"▪"`   |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Color Picker

Color picker with palette, hex, and RGB input



<ComponentPreview base="ink" name="color-picker-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/color-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="color-picker" title="components/ui/color-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ColorPicker } from "@/components/ui/color-picker";
```

```tsx
<ColorPicker label="Pick a color" onChange={(color) => {}} />
```

API Reference [#api-reference]

ColorPicker [#colorpicker]

| Prop        | Type                      | Default           |
| ----------- | ------------------------- | ----------------- |
| `value`     | `string`                  | -                 |
| `onChange`  | `(color: string) => void` | -                 |
| `onSubmit`  | `(color: string) => void` | -                 |
| `label`     | `string`                  | -                 |
| `palette`   | `string[]`                | `DEFAULT_PALETTE` |
| `autoFocus` | `boolean`                 | `false`           |
| `id`        | `string`                  | -                 |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Selection

Components for selecting values, options, and choices in the terminal.



<ComponentsList category="selection" />


# Multi Select

Multi-select list with checkboxes and select-all



<ComponentPreview base="ink" name="multi-select-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/multi-select
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="multi-select" title="components/ui/multi-select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { MultiSelect } from "@/components/ui/multi-select";
```

```tsx
<MultiSelect
  options={[
    { value: "react", label: "React" },
    { value: "vue", label: "Vue" },
    { value: "svelte", label: "Svelte" },
  ]}
  onChange={(values) => {}}
/>
```

API Reference [#api-reference]

MultiSelect [#multiselect]

| Prop        | Type                     | Default    |
| ----------- | ------------------------ | ---------- |
| `options`   | `MultiSelectOption<T>[]` | `required` |
| `value`     | `T[]`                    | -          |
| `onChange`  | `(values: T[]) => void`  | -          |
| `onSubmit`  | `(values: T[]) => void`  | -          |
| `cursor`    | `string`                 | `"›"`      |
| `checkmark` | `string`                 | `"◉"`      |
| `height`    | `number`                 | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Radio Group

Mutually exclusive radio button group



<ComponentPreview base="ink" name="radio-group-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/radio-group
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="radio-group" title="components/ui/radio-group.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { RadioGroup } from "@/components/ui/radio-group";
```

```tsx
<RadioGroup
  options={[
    { value: "sm", label: "Small" },
    { value: "md", label: "Medium" },
    { value: "lg", label: "Large" },
  ]}
  onChange={(value) => {}}
/>
```

API Reference [#api-reference]

RadioGroup [#radiogroup]

| Prop       | Type                 | Default    |
| ---------- | -------------------- | ---------- |
| `options`  | `RadioOption<T>[]`   | `required` |
| `value`    | `T`                  | -          |
| `onChange` | `(value: T) => void` | -          |
| `name`     | `string`             | -          |
| `cursor`   | `string`             | `"›"`      |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Select

Single-select dropdown with arrow-key navigation



<ComponentPreview base="ink" name="select-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/select
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="select" title="components/ui/select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Select } from "@/components/ui/select";
```

```tsx
<Select
  label="Choose a framework"
  options={[
    { value: "next", label: "Next.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
  ]}
  onChange={(value) => {}}
/>
```

API Reference [#api-reference]

Select [#select]

| Prop          | Type                 | Default    |
| ------------- | -------------------- | ---------- |
| `options`     | `SelectOption<T>[]`  | `required` |
| `value`       | `T`                  | -          |
| `onChange`    | `(value: T) => void` | -          |
| `onSubmit`    | `(value: T) => void` | -          |
| `label`       | `string`             | -          |
| `cursor`      | `string`             | `"›"`      |
| `cursorColor` | `string`             | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Tag Input

Add and remove tags inline



<ComponentPreview base="ink" name="tag-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tag-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="tag-input" title="components/ui/tag-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TagInput } from "@/components/ui/tag-input";
```

```tsx
<TagInput placeholder="Add a tag…" onChange={(tags) => {}} />
```

API Reference [#api-reference]

TagInput [#taginput]

| Prop          | Type                       | Default                   |
| ------------- | -------------------------- | ------------------------- |
| `value`       | `string[]`                 | -                         |
| `onChange`    | `(tags: string[]) => void` | -                         |
| `placeholder` | `string`                   | `"Type and press Enter…"` |
| `maxTags`     | `number`                   | -                         |
| `delimiter`   | `string`                   | -                         |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Left` / `Right` move by grapheme, `Home` / `End` move to the boundaries, and `Backspace` / `Delete` remove one complete grapheme. `Enter` submits or confirms (`Ctrl+Enter` in TextArea); `Tab` / `Shift+Tab` leave through Ink focus traversal.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Tree Select

Hierarchical tree selection



<ComponentPreview base="ink" name="tree-select-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tree-select
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="tree-select" title="components/ui/tree-select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TreeSelect } from "@/components/ui/tree-select";
```

```tsx
<TreeSelect
  label="Select a file"
  nodes={[
    {
      value: "src",
      label: "src",
      children: [
        { value: "index.ts", label: "index.ts" },
        { value: "utils.ts", label: "utils.ts" },
      ],
    },
    { value: "README.md", label: "README.md" },
  ]}
  onChange={(value) => {}}
/>
```

API Reference [#api-reference]

TreeSelect [#treeselect]

| Prop                | Type                  | Default    |
| ------------------- | --------------------- | ---------- |
| `nodes`             | `TreeSelectNode<T>[]` | `required` |
| `value`             | `T`                   | -          |
| `onChange`          | `(value: T) => void`  | -          |
| `onSubmit`          | `(value: T) => void`  | -          |
| `label`             | `string`              | -          |
| `expandedByDefault` | `boolean`             | `false`    |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Badge

Semantic status indicator badge (success/error/warning/info)



<ComponentPreview base="ink" name="badge-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/badge
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="badge" title="components/ui/badge.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Badge } from "@/components/ui/badge";
```

```tsx
<Badge variant="success">Active</Badge>
```

Examples [#examples]

Basic [#basic]

A basic default badge.

<ComponentPreview base="ink" name="badge-basic" />

Bold Without Border [#bold-without-border]

Use `bold` and `bordered={false}` for an inline label style.

<ComponentPreview base="ink" name="badge-bold" />

Custom Border Style [#custom-border-style]

Customize the border style and padding.

<ComponentPreview base="ink" name="badge-custom-border" />

API Reference [#api-reference]

Badge [#badge]

| Prop          | Type                                                                                         | Default     |
| ------------- | -------------------------------------------------------------------------------------------- | ----------- |
| `children`    | `string`                                                                                     | `required`  |
| `variant`     | `"default" \| "success" \| "warning" \| "error" \| "info" \| "secondary"`                    | `"default"` |
| `color`       | `string`                                                                                     | -           |
| `bold`        | `boolean`                                                                                    | `false`     |
| `bordered`    | `boolean`                                                                                    | `true`      |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`   |
| `paddingX`    | `number`                                                                                     | `1`         |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Big Text

Figlet-style large ASCII art text



<ComponentPreview base="ink" name="big-text-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/big-text
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="big-text" title="components/ui/big-text.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { BigText } from "@/components/ui/big-text";
```

```tsx
<BigText>HELLO</BigText>
```

Examples [#examples]

Simple [#simple]

<ComponentPreview base="ink" name="big-text-simple" />

Shade [#shade]

<ComponentPreview base="ink" name="big-text-shade" />

Slim [#slim]

<ComponentPreview base="ink" name="big-text-slim" />

API Reference [#api-reference]

BigText [#bigtext]

| Prop       | Type                                       | Default    |
| ---------- | ------------------------------------------ | ---------- |
| `children` | `string`                                   | `required` |
| `color`    | `string`                                   | -          |
| `font`     | `"block" \| "simple" \| "shade" \| "slim"` | `"block"`  |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Code

Syntax-highlighted code block (50+ languages)



<ComponentPreview base="ink" name="code-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/code
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="code" title="components/ui/code.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Code } from "@/components/ui/code";
```

```tsx
<Code language="typescript">
  {`const greeting = "Hello, world!";\nconsole.log(greeting);`}
</Code>
```

Examples [#examples]

Multiline [#multiline]

<ComponentPreview base="ink" name="code-multiline" />

API Reference [#api-reference]

Code [#code]

| Prop                  | Type                                                                                         | Default    |
| --------------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `children`            | `string`                                                                                     | `required` |
| `language`            | `string`                                                                                     | -          |
| `inline`              | `boolean`                                                                                    | `false`    |
| `borderStyle`         | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"` |
| `showLineNumbers`     | `boolean`                                                                                    | `true`     |
| `lineNumberSeparator` | `string`                                                                                     | `"│ "`     |
| `keywordColor`        | `string`                                                                                     | -          |
| `stringColor`         | `string`                                                                                     | -          |
| `numberColor`         | `string`                                                                                     | -          |
| `commentColor`        | `string`                                                                                     | -          |
| `operatorColor`       | `string`                                                                                     | -          |
| `plainColor`          | `string`                                                                                     | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Digits

Box-drawing character numerals



<ComponentPreview base="ink" name="digits-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/digits
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="digits" title="components/ui/digits.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Digits } from "@/components/ui/digits";
```

```tsx
<Digits value="12:30" />
```

API Reference [#api-reference]

Digits [#digits]

| Prop    | Type                   | Default    |
| ------- | ---------------------- | ---------- |
| `value` | `string \| number`     | `required` |
| `color` | `string`               | -          |
| `size`  | `"sm" \| "md" \| "lg"` | `"md"`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Gradient

Color gradient text



<ComponentPreview base="ink" name="gradient-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/gradient
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource base="ink" name="gradient" title="components/ui/gradient.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Gradient } from "@/components/ui/gradient";
```

```tsx
<Gradient colors={["#ff6b6b", "#4ecdc4"]}>Hello Gradient</Gradient>
```

Examples [#examples]

Cristal [#cristal]

<ComponentPreview base="ink" name="gradient-cristal" />

Teen [#teen]

<ComponentPreview base="ink" name="gradient-teen" />

Mind [#mind]

<ComponentPreview base="ink" name="gradient-mind" />

Morning [#morning]

<ComponentPreview base="ink" name="gradient-morning" />

Vice [#vice]

<ComponentPreview base="ink" name="gradient-vice" />

Passion [#passion]

<ComponentPreview base="ink" name="gradient-passion" />

Fruit [#fruit]

<ComponentPreview base="ink" name="gradient-fruit" />

Instagram [#instagram]

<ComponentPreview base="ink" name="gradient-instagram" />

Atlas [#atlas]

<ComponentPreview base="ink" name="gradient-atlas" />

Retro [#retro]

<ComponentPreview base="ink" name="gradient-retro" />

Summer [#summer]

<ComponentPreview base="ink" name="gradient-summer" />

Pastel [#pastel]

<ComponentPreview base="ink" name="gradient-pastel" />

Rainbow [#rainbow]

<ComponentPreview base="ink" name="gradient-rainbow" />

API Reference [#api-reference]

Gradient [#gradient]

Either pass `colors`, or pass `name` (not both required; `name` selects a preset when `colors` is omitted).

| Prop       | Type                                                                                                                                                     | Default    |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `children` | `string`                                                                                                                                                 | `required` |
| `colors`   | `string[]`                                                                                                                                               | -          |
| `name`     | `"cristal" \| "teen" \| "mind" \| "morning" \| "vice" \| "passion" \| "fruit" \| "instagram" \| "atlas" \| "retro" \| "summer" \| "pastel" \| "rainbow"` | -          |
| `bold`     | `boolean`                                                                                                                                                | `false`    |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Heading

h1–h4 styled headings with optional figlet ASCII art



<ComponentPreview base="ink" name="heading-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/heading
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="heading" title="components/ui/heading.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Heading } from "@/components/ui/heading";
```

```tsx
<Heading level={1}>Getting Started</Heading>
```

API Reference [#api-reference]

Heading [#heading]

| Prop        | Type               | Default    |
| ----------- | ------------------ | ---------- |
| `level`     | `1 \| 2 \| 3 \| 4` | `1`        |
| `children`  | `ReactNode`        | `required` |
| `color`     | `string`           | -          |
| `prefix1`   | `string`           | `"██ "`    |
| `prefix2`   | `string`           | `"▌ "`     |
| `prefix3`   | `string`           | `"› "`     |
| `uppercase` | `boolean`          | `true`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Typography

Components for rendering and styling text in your terminal UI.



<ComponentsList category="typography" />


# Link

OSC 8 clickable hyperlink



<ComponentPreview base="ink" name="link-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/link
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="ink" name="link" title="components/ui/link.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Link } from "@/components/ui/link";
```

```tsx
<Link href="https://github.com">GitHub</Link>
```

Examples [#examples]

Show URL and terminals without OSC 8 [#show-url-and-terminals-without-osc-8]

`showHref` appends the URL in dim text. When the terminal does not support OSC 8 hyperlinks, the same fallback is used unless you set `fallback={false}` or pass a custom `fallback` function.

<ComponentPreview base="ink" name="link-show-href" />

API Reference [#api-reference]

Link [#link]

| Prop       | Type                                                 | Default    |
| ---------- | ---------------------------------------------------- | ---------- |
| `children` | `ReactNode`                                          | `required` |
| `href`     | `string`                                             | `required` |
| `color`    | `string`                                             | -          |
| `showHref` | `boolean`                                            | `false`    |
| `fallback` | `boolean \| ((text: string, url: string) => string)` | `true`     |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Markdown

Full markdown renderer for terminal



<ComponentPreview base="ink" name="markdown-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/markdown
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource base="ink" name="markdown" title="components/ui/markdown.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Markdown } from "@/components/ui/markdown";
```

```tsx
<Markdown>{`# Welcome\n\nThis is **bold** and *italic* text.`}</Markdown>
```

Examples [#examples]

Streaming [#streaming]

While tokens arrive, enable `streaming` to blink a cursor after the last line and auto-close an odd number of Markdown fenced code blocks so partial streams still render.

<ComponentPreview base="ink" name="markdown-streaming-demo" />

API Reference [#api-reference]

Markdown [#markdown]

| Prop        | Type      | Default    |
| ----------- | --------- | ---------- |
| `children`  | `string`  | `required` |
| `width`     | `number`  | -          |
| `streaming` | `boolean` | `false`    |
| `cursor`    | `string`  | `"▌"`      |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Tag

Removable chip/tag



<ComponentPreview base="ink" name="tag-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/tag
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="tag" title="components/ui/tag.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tag } from "@/components/ui/tag";
```

```tsx
<Tag>typescript</Tag>
```

Examples [#examples]

Outline [#outline]

A variant with a muted border style.

<ComponentPreview base="ink" name="tag-outline" />

API Reference [#api-reference]

Tag [#tag]

| Prop       | Type                     | Default     |
| ---------- | ------------------------ | ----------- |
| `children` | `ReactNode`              | `required`  |
| `onRemove` | `() => void`             | -           |
| `color`    | `string`                 | -           |
| `variant`  | `"default" \| "outline"` | `"default"` |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Clipboard

Copy-to-clipboard button with success feedback



<ComponentPreview base="ink" name="clipboard-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/clipboard
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-clipboard.ts" title="hooks/use-clipboard.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="clipboard" title="components/ui/clipboard.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Clipboard } from "@/components/ui/clipboard";
```

```tsx
<Clipboard value="npm install termcn" label="Install command" />
```

API Reference [#api-reference]

Clipboard [#clipboard]

| Prop             | Type     | Default     |
| ---------------- | -------- | ----------- |
| `value`          | `string` | `required`  |
| `label`          | `string` | -           |
| `successMessage` | `string` | `"Copied!"` |
| `timeout`        | `number` | `2000`      |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Clock

Real-time clock display with 12h/24h and date



<ComponentPreview base="ink" name="clock-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/clock
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interval.ts" title="hooks/use-interval.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="clock" title="components/ui/clock.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Clock } from "@/components/ui/clock";
```

```tsx
<Clock format="12h" showSeconds showDate timezone="America/New_York" />
```

API Reference [#api-reference]

Clock [#clock]

| Prop          | Type             | Default |
| ------------- | ---------------- | ------- |
| `format`      | `"12h" \| "24h"` | `"24h"` |
| `showSeconds` | `boolean`        | `true`  |
| `showDate`    | `boolean`        | `false` |
| `timezone`    | `string`         | -       |
| `color`       | `string`         | -       |
| `size`        | `"sm" \| "lg"`   | `"sm"`  |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Embedded Terminal

Embedded PTY terminal panel (requires node-pty peer)



<ComponentPreview base="ink" name="embedded-terminal-demo" />

<Callout type="info">
  Embedded terminal requires Node.js and may not render in the browser preview.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/embedded-terminal
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="embedded-terminal" title="components/ui/embedded-terminal.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { EmbeddedTerminal } from "@/components/ui/embedded-terminal";
```

```tsx
<EmbeddedTerminal
  command="bash"
  args={["-c", "echo Hello world"]}
  width={80}
  height={24}
  onExit={(code) => console.log(`Exited with ${code}`)}
/>
```

API Reference [#api-reference]

EmbeddedTerminal [#embeddedterminal]

| Prop      | Type                     | Default    |
| --------- | ------------------------ | ---------- |
| `command` | `string`                 | `required` |
| `args`    | `string[]`               | `[]`       |
| `cwd`     | `string`                 | -          |
| `width`   | `number`                 | `80`       |
| `height`  | `number`                 | `24`       |
| `onExit`  | `(code: number) => void` | -          |

`width` is the preferred maximum. The component clamps itself to the current
Ink stdout width and resizes the PTY without restarting the running process.

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Error Boundary

React error boundary with graceful terminal display



<ComponentPreview base="ink" name="error-boundary-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/error-boundary
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="error-boundary" title="components/ui/error-boundary.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ErrorBoundary } from "@/components/ui/error-boundary";
```

```tsx
<ErrorBoundary title="Application Error">
  <YourAppContent />
</ErrorBoundary>
```

API Reference [#api-reference]

ErrorBoundary [#errorboundary]

| Prop       | Type                                                       | Default    |
| ---------- | ---------------------------------------------------------- | ---------- |
| `children` | `ReactNode`                                                | `required` |
| `fallback` | `ReactNode`                                                | -          |
| `onError`  | `(error: Error, info: { componentStack: string }) => void` | -          |
| `title`    | `string`                                                   | `"Error"`  |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Help

Auto-generated help panel from a keymap



<ComponentPreview base="ink" name="help-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/help
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="help" title="components/ui/help.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Help } from "@/components/ui/help";
```

```tsx
<Help
  title="Keyboard Shortcuts"
  keymap={{
    q: "Quit",
    h: "Help",
    j: "Move down",
    k: "Move up",
  }}
/>
```

API Reference [#api-reference]

Help [#help]

| Prop      | Type                     | Default    |
| --------- | ------------------------ | ---------- |
| `keymap`  | `Record<string, string>` | `required` |
| `title`   | `string`                 | -          |
| `compact` | `boolean`                | `false`    |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Image

Image renderer with iTerm2/Kitty protocol and ASCII fallback



<ComponentPreview base="ink" name="image-demo" />

<Callout type="info">
  Image rendering uses terminal-specific protocols (iTerm2, Kitty) and falls
  back to ASCII art. Results vary by terminal emulator.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/image
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/accessibility.ts" title="lib/accessibility.ts" />

      <ComponentSource base="ink" name="image" title="components/ui/image.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Image } from "@/components/ui/image";
```

```tsx
<Image src="./screenshot.png" width={40} alt="Application screenshot" />
```

API Reference [#api-reference]

Image [#image]

| Prop       | Type                                       | Default    |
| ---------- | ------------------------------------------ | ---------- |
| `src`      | `string`                                   | `required` |
| `width`    | `number`                                   | `20`       |
| `height`   | `number`                                   | -          |
| `protocol` | `"auto" \| "iterm2" \| "kitty" \| "ascii"` | `"auto"`   |
| `alt`      | `string`                                   | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# Utility

Utility components for common terminal patterns like clipboard, timers, and panels.



<ComponentsList category="utility" />


# Keyboard Shortcuts

Formatted keyboard shortcut reference table



<ComponentPreview base="ink" name="keyboard-shortcuts-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/keyboard-shortcuts
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="keyboard-shortcuts" title="components/ui/keyboard-shortcuts.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { KeyboardShortcuts } from "@/components/ui/keyboard-shortcuts";
```

```tsx
<KeyboardShortcuts
  title="Editor Shortcuts"
  shortcuts={[
    { key: "Ctrl+S", description: "Save file" },
    { key: "Ctrl+Z", description: "Undo" },
    { key: "Ctrl+F", description: "Find" },
  ]}
/>
```

API Reference [#api-reference]

KeyboardShortcuts [#keyboardshortcuts]

| Prop        | Type         | Default    |
| ----------- | ------------ | ---------- |
| `shortcuts` | `Shortcut[]` | `required` |
| `columns`   | `number`     | `1`        |
| `title`     | `string`     | -          |

Shortcut [#shortcut]

| Prop          | Type     | Default    |
| ------------- | -------- | ---------- |
| `key`         | `string` | `required` |
| `description` | `string` | `required` |
| `category`    | `string` | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Log

Scrolling log viewer with severity levels and filtering



<ComponentPreview base="ink" name="log-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/log
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource base="ink" name="log" title="components/ui/log.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Log } from "@/components/ui/log";
```

```tsx
<Log
  entries={[
    { level: "info", message: "Server started on port 3000" },
    { level: "warn", message: "Deprecated API call detected" },
    { level: "error", message: "Failed to connect to database" },
  ]}
  height={10}
  showTimestamp
  follow
/>
```

API Reference [#api-reference]

Log [#log]

| Prop            | Type         | Default    |
| --------------- | ------------ | ---------- |
| `entries`       | `LogEntry[]` | `required` |
| `height`        | `number`     | `10`       |
| `showTimestamp` | `boolean`    | `true`     |
| `filter`        | `string`     | -          |
| `follow`        | `boolean`    | `false`    |

LogEntry [#logentry]

| Prop        | Type                                     | Default    |
| ----------- | ---------------------------------------- | ---------- |
| `level`     | `"debug" \| "info" \| "warn" \| "error"` | `required` |
| `message`   | `string`                                 | `required` |
| `timestamp` | `Date`                                   | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move the current item or viewport; `Home` / `End` move to the boundaries; `PageUp` / `PageDown` move by a page; `Enter` / `Space` select or expand when supported; `Tab` / `Shift+Tab` leave the composite.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Panel

Titled bordered panel



<ComponentPreview base="ink" name="panel-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/panel
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource base="ink" name="panel" title="components/ui/panel.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Panel } from "@/components/ui/panel";
```

```tsx
<Panel title="System Status" borderStyle="round" width={40}>
  <Text>All services operational</Text>
</Panel>
```

API Reference [#api-reference]

Panel [#panel]

| Prop          | Type                                                                                         | Default |
| ------------- | -------------------------------------------------------------------------------------------- | ------- |
| `title`       | `string`                                                                                     | -       |
| `titleColor`  | `string`                                                                                     | -       |
| `borderColor` | `string`                                                                                     | -       |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | -       |
| `bordered`    | `boolean`                                                                                    | `true`  |
| `width`       | `number`                                                                                     | -       |
| `height`      | `number`                                                                                     | -       |
| `paddingX`    | `number`                                                                                     | `1`     |
| `paddingY`    | `number`                                                                                     | `0`     |
| `children`    | `ReactNode`                                                                                  | -       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Screen-reader mode removes decorative output while preserving meaningful labels and state.


# QR Code

Unicode block QR code generator



<ComponentPreview base="ink" name="qr-code-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/qr-code
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/lib/accessibility.ts" title="lib/accessibility.ts" />

      <ComponentSource base="ink" name="qr-code" title="components/ui/qr-code.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { QRCode } from "@/components/ui/qr-code";
```

```tsx
<QRCode value="https://termcn.dev" size="md" label="Scan to visit" />
```

API Reference [#api-reference]

QRCode [#qrcode]

| Prop    | Type                   | Default    |
| ------- | ---------------------- | ---------- |
| `value` | `string`               | `required` |
| `size`  | `"sm" \| "md" \| "lg"` | `"md"`     |
| `color` | `string`               | -          |
| `label` | `string`               | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Stopwatch

Count-up stopwatch with laps and reset



<ComponentPreview base="ink" name="stopwatch-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/stopwatch
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/hooks/use-interval.ts" title="hooks/use-interval.ts" />

      <ComponentSource base="ink" name="stopwatch" title="components/ui/stopwatch.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Stopwatch } from "@/components/ui/stopwatch";
```

```tsx
<Stopwatch autoStart showLaps color="green" />
```

API Reference [#api-reference]

Stopwatch [#stopwatch]

| Prop        | Type      | Default |
| ----------- | --------- | ------- |
| `autoStart` | `boolean` | `false` |
| `color`     | `string`  | -       |
| `showLaps`  | `boolean` | `true`  |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Timer

Countdown timer with pause/resume and auto-start



<ComponentPreview base="ink" name="timer-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/timer
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-motion.ts" title="hooks/use-motion.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/hooks/use-interval.ts" title="hooks/use-interval.ts" />

      <ComponentSource base="ink" name="timer" title="components/ui/timer.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Timer } from "@/components/ui/timer";
```

```tsx
<Timer duration={300} format="ms" label="Pomodoro" autoStart />
```

API Reference [#api-reference]

Timer [#timer]

| Prop         | Type                   | Default    |
| ------------ | ---------------------- | ---------- |
| `duration`   | `number`               | `required` |
| `onComplete` | `() => void`           | -          |
| `autoStart`  | `boolean`              | `false`    |
| `format`     | `"hms" \| "ms" \| "s"` | `"hms"`    |
| `color`      | `string`               | -          |
| `label`      | `string`               | -          |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** `Enter` / `Space` activate the focused action when enabled; `Escape` dismisses or cancels when supported; `Tab` / `Shift+Tab` move through Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Toggle

Toggle/switch component with on/off labels



<ComponentPreview base="ink" name="toggle-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/ink/toggle
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install ink
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/ink/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/ink/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-unicode.ts" title="hooks/use-unicode.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-interaction.tsx" title="hooks/use-interaction.tsx" />

      <ComponentSource src="registry/bases/ink/lib/terminal-style.ts" title="lib/terminal-style.ts" />

      <ComponentSource src="registry/bases/ink/lib/terminal-symbols.ts" title="lib/terminal-symbols.ts" />

      <ComponentSource base="ink" name="toggle" title="components/ui/toggle.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Toggle } from "@/components/ui/toggle";
```

```tsx
<Toggle checked={enabled} onChange={setEnabled} label="Dark mode" />
```

API Reference [#api-reference]

Toggle [#toggle]

| Prop            | Type                                                                                         | Default   |
| --------------- | -------------------------------------------------------------------------------------------- | --------- |
| `checked`       | `boolean`                                                                                    | -         |
| `onChange`      | `(checked: boolean) => void`                                                                 | -         |
| `label`         | `string`                                                                                     | -         |
| `onLabel`       | `string`                                                                                     | `"ON"`    |
| `offLabel`      | `string`                                                                                     | `"OFF"`   |
| `id`            | `string`                                                                                     | -         |
| `disabled`      | `boolean`                                                                                    | `false`   |
| `checkedIcon`   | `string`                                                                                     | `"●"`     |
| `uncheckedIcon` | `string`                                                                                     | `"○"`     |
| `borderStyle`   | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`      | `number`                                                                                     | `1`       |

Notes [#notes]

Accessibility [#accessibility]

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

* **Keyboard:** Arrow keys move inside the composite; `Home` / `End` select the first or last enabled item; `Enter` / `Space` activate, select, or toggle; `Escape` cancels or closes an owned surface; `Tab` / `Shift+Tab` move between termcn/Ink focus targets.
* **Focus and composition:** Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
* **Screen reader:** Ink labels and semantic state expose the component without relying on visual styling alone.


# Chat Message

Chat message bubble with role label, streaming indicator, and collapsible content



<ComponentPreview base="opentui" name="chat-message-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/chat-message
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="chat-message" title="components/ui/chat-message.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ChatMessage } from "@/components/ui/chat-message";
```

```tsx
<ChatMessage sender="assistant" name="Claude" timestamp={new Date()}>
  Here is the refactored version of your function.
</ChatMessage>
```

API Reference [#api-reference]

ChatMessage [#chatmessage]

| Prop        | Type                                           | Default    |
| ----------- | ---------------------------------------------- | ---------- |
| `sender`    | `"user" \| "assistant" \| "system" \| "error"` | `required` |
| `name`      | `string`                                       | -          |
| `timestamp` | `Date`                                         | -          |
| `streaming` | `boolean`                                      | `false`    |
| `collapsed` | `boolean`                                      | -          |
| `children`  | `ReactNode`                                    | -          |


# Chat Thread

Scrollable container for stacking ChatMessage components in a conversation thread



<ComponentPreview base="opentui" name="chat-thread-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/chat-thread
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="chat-thread" title="components/ui/chat-thread.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ChatThread } from "@/components/ui/chat-thread";
import { ChatMessage } from "@/components/ui/chat-message";
```

```tsx
<ChatThread maxHeight={20}>
  <ChatMessage sender="user">How do I center a div?</ChatMessage>
  <ChatMessage sender="assistant">
    Use flexbox: display flex, justify-content center, align-items center.
  </ChatMessage>
</ChatThread>
```

API Reference [#api-reference]

ChatThread [#chatthread]

| Prop         | Type        | Default |
| ------------ | ----------- | ------- |
| `maxHeight`  | `number`    | -       |
| `autoScroll` | `boolean`   | `true`  |
| `children`   | `ReactNode` | -       |


# File Change

Interactive file-change review list with diff expansion, per-file accept/reject actions, and accept-all shortcut



<ComponentPreview base="opentui" name="file-change-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/file-change
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="file-change" title="components/ui/file-change.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { FileChange } from "@/components/ui/file-change";
```

```tsx
<FileChange
  changes={[
    { path: "src/utils.ts", type: "modify", diff: "-old line\n+new line" },
    {
      path: "src/helpers.ts",
      type: "create",
      content: "export const add = (a, b) => a + b;",
    },
    { path: "src/legacy.ts", type: "delete" },
  ]}
  onAccept={(path) => console.log("accepted", path)}
  onReject={(path) => console.log("rejected", path)}
  onAcceptAll={() => console.log("accepted all")}
/>
```

API Reference [#api-reference]

FileChange [#filechange]

| Prop          | Type                     | Default    |
| ------------- | ------------------------ | ---------- |
| `changes`     | `FileChangeItem[]`       | `required` |
| `onAccept`    | `(path: string) => void` | -          |
| `onReject`    | `(path: string) => void` | -          |
| `onAcceptAll` | `() => void`             | -          |


# AI

Components for building AI-powered chat interfaces and tool interactions.



<ComponentsList base="opentui" category="ai" />


# Model Selector

Keyboard-navigable list for selecting an AI model, with optional provider grouping and context-window display



<ComponentPreview base="opentui" name="model-selector-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/model-selector
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="model-selector" title="components/ui/model-selector.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ModelSelector } from "@/components/ui/model-selector";
```

```tsx
<ModelSelector
  models={[
    { id: "gpt-4o", name: "GPT-4o", provider: "OpenAI", context: 128000 },
    {
      id: "claude-3-5-sonnet",
      name: "Claude 3.5 Sonnet",
      provider: "Anthropic",
      context: 200000,
    },
  ]}
  selected="gpt-4o"
  onSelect={(id) => console.log("selected", id)}
/>
```

API Reference [#api-reference]

ModelSelector [#modelselector]

| Prop              | Type                   | Default    |
| ----------------- | ---------------------- | ---------- |
| `models`          | `ModelOption[]`        | `required` |
| `selected`        | `string`               | `required` |
| `onSelect`        | `(id: string) => void` | `required` |
| `showContext`     | `boolean`              | `true`     |
| `showProvider`    | `boolean`              | `true`     |
| `groupByProvider` | `boolean`              | `false`    |


# Streaming Text

Token-by-token streaming text with blinking cursor and optional typing animation



<ComponentPreview base="opentui" name="streaming-text-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/streaming-text
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="streaming-text" title="components/ui/streaming-text.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { StreamingText } from "@/components/ui/streaming-text";
```

```tsx
<StreamingText text="Installing dependencies..." animate speed={20} />
```

API Reference [#api-reference]

StreamingText [#streamingtext]

| Prop          | Type                         | Default |
| ------------- | ---------------------------- | ------- |
| `text`        | `string`                     | -       |
| `stream`      | `AsyncIterable<string>`      | -       |
| `cursor`      | `boolean`                    | `true`  |
| `animate`     | `boolean`                    | `false` |
| `speed`       | `number`                     | `30`    |
| `onComplete`  | `(fullText: string) => void` | -       |
| `cursorColor` | `string`                     | -       |


# Thinking Block

Collapsible block for displaying extended thinking / reasoning content from an AI model



<ComponentPreview base="opentui" name="thinking-block-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/thinking-block
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="thinking-block" title="components/ui/thinking-block.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ThinkingBlock } from "@/components/ui/thinking-block";
```

```tsx
<ThinkingBlock
  content="The user wants to refactor the function. I should split it into smaller helpers..."
  tokenCount={1284}
  duration={3200}
/>
```

API Reference [#api-reference]

ThinkingBlock [#thinkingblock]

| Prop               | Type      | Default       |
| ------------------ | --------- | ------------- |
| `content`          | `string`  | `required`    |
| `streaming`        | `boolean` | `false`       |
| `defaultCollapsed` | `boolean` | `true`        |
| `label`            | `string`  | `"Reasoning"` |
| `tokenCount`       | `number`  | -             |
| `duration`         | `number`  | -             |


# Token Usage

Compact token counter showing prompt and completion usage with optional cost estimate; also exports ContextMeter for visualising context window fill



<ComponentPreview base="opentui" name="token-usage-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/token-usage
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="token-usage" title="components/ui/token-usage.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TokenUsage, ContextMeter } from "@/components/ui/token-usage";
```

```tsx
<TokenUsage prompt={2450} completion={890} model="gpt-4o" showCost />
```

API Reference [#api-reference]

TokenUsage [#tokenusage]

| Prop         | Type      | Default    |
| ------------ | --------- | ---------- |
| `prompt`     | `number`  | `required` |
| `completion` | `number`  | `required` |
| `model`      | `string`  | -          |
| `showCost`   | `boolean` | `false`    |

ContextMeter [#contextmeter]

| Prop          | Type      | Default    |
| ------------- | --------- | ---------- |
| `used`        | `number`  | `required` |
| `limit`       | `number`  | `required` |
| `label`       | `string`  | -          |
| `showPercent` | `boolean` | `true`     |
| `warnAt`      | `number`  | `75`       |
| `criticalAt`  | `number`  | `90`       |
| `width`       | `number`  | `20`       |


# Tool Approval

Interactive approval prompt for AI tool calls with risk-level badge, args display, and auto-deny timeout



<ComponentPreview base="opentui" name="tool-approval-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tool-approval
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tool-approval" title="components/ui/tool-approval.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ToolApproval } from "@/components/ui/tool-approval";
```

```tsx
<ToolApproval
  name="execute_shell"
  description="Run a shell command on the host machine"
  args={{ command: "rm -rf ./dist" }}
  risk="high"
  onApprove={() => console.log("approved")}
  onDeny={() => console.log("denied")}
  timeout={30}
/>
```

API Reference [#api-reference]

ToolApproval [#toolapproval]

| Prop            | Type                          | Default    |
| --------------- | ----------------------------- | ---------- |
| `name`          | `string`                      | `required` |
| `description`   | `string`                      | -          |
| `args`          | `Record<string, unknown>`     | -          |
| `risk`          | `"low" \| "medium" \| "high"` | `"low"`    |
| `onApprove`     | `() => void`                  | `required` |
| `onDeny`        | `() => void`                  | `required` |
| `onAlwaysAllow` | `() => void`                  | -          |
| `timeout`       | `number`                      | -          |


# Tool Call

Displays an AI tool invocation with status indicator, args, result, and elapsed time



<ComponentPreview base="opentui" name="tool-call-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tool-call
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tool-call" title="components/ui/tool-call.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ToolCall } from "@/components/ui/tool-call";
```

```tsx
<ToolCall
  name="search_codebase"
  args={{ query: "handleSubmit", maxResults: 10 }}
  status="success"
  result="Found 3 matches in src/components/"
  duration={245}
/>
```

API Reference [#api-reference]

ToolCall [#toolcall]

| Prop               | Type                                             | Default    |
| ------------------ | ------------------------------------------------ | ---------- |
| `name`             | `string`                                         | `required` |
| `args`             | `Record<string, unknown>`                        | -          |
| `status`           | `"pending" \| "running" \| "success" \| "error"` | `required` |
| `result`           | `unknown`                                        | -          |
| `duration`         | `number`                                         | -          |
| `collapsible`      | `boolean`                                        | `true`     |
| `defaultCollapsed` | `boolean`                                        | `true`     |


# Card

Card with header, body, and footer slots



<ComponentPreview base="opentui" name="card-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/card
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="card" title="components/ui/card.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Card } from "@/components/ui/card";
```

```tsx
<Card title="System Info" subtitle="Local machine">
  <Text>CPU: 4 cores @ 3.2 GHz</Text>
</Card>
```

API Reference [#api-reference]

Card [#card]

| Prop                | Type                                                                                         | Default    |
| ------------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `title`             | `string`                                                                                     | -          |
| `subtitle`          | `string`                                                                                     | -          |
| `children`          | `ReactNode`                                                                                  | `required` |
| `footer`            | `ReactNode`                                                                                  | -          |
| `borderColor`       | `string`                                                                                     | -          |
| `width`             | `number`                                                                                     | -          |
| `borderStyle`       | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`  |
| `paddingX`          | `number`                                                                                     | `1`        |
| `paddingY`          | `number`                                                                                     | `0`        |
| `footerDividerChar` | `string`                                                                                     | `"─"`      |


# Data Grid

Advanced data grid with sorting, filtering, pagination, and cell editing



<ComponentPreview base="opentui" name="data-grid-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/data-grid
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="data-grid" title="components/ui/data-grid.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DataGrid } from "@/components/ui/data-grid";
```

```tsx
<DataGrid
  data={[
    { name: "Alice", role: "Engineer", status: "Active" },
    { name: "Bob", role: "Designer", status: "Away" },
  ]}
  columns={[
    { key: "name", header: "Name", width: 12 },
    { key: "role", header: "Role", width: 12 },
    { key: "status", header: "Status", width: 10 },
  ]}
/>
```

API Reference [#api-reference]

DataGrid [#datagrid]

| Prop                | Type                                           | Default    |
| ------------------- | ---------------------------------------------- | ---------- |
| `data`              | `T[]`                                          | `required` |
| `columns`           | `DataGridColumn<T>[]`                          | `required` |
| `pageSize`          | `number`                                       | `10`       |
| `onRowSelect`       | `(row: T) => void`                             | -          |
| `onCellEdit`        | `(row: T, key: string, value: string) => void` | -          |
| `borderColor`       | `string`                                       | -          |
| `borderStyle`       | `"single" \| "double" \| "round" \| "bold"`    | `"single"` |
| `showRowNumbers`    | `boolean`                                      | `false`    |
| `filterPlaceholder` | `string`                                       | -          |

DataGridColumn [#datagridcolumn]

| Prop         | Type                                 | Default    |
| ------------ | ------------------------------------ | ---------- |
| `key`        | `keyof T & string`                   | `required` |
| `header`     | `string`                             | `required` |
| `width`      | `number`                             | -          |
| `align`      | `"left" \| "right" \| "center"`      | `"left"`   |
| `render`     | `(value: unknown, row: T) => string` | -          |
| `filterable` | `boolean`                            | -          |
| `sortable`   | `boolean`                            | -          |


# Definition

Term–description definition list



<ComponentPreview base="opentui" name="definition-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/definition
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="definition" title="components/ui/definition.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Definition } from "@/components/ui/definition";
```

```tsx
<Definition
  items={[
    { term: "CLI", description: "Command Line Interface" },
    { term: "TUI", description: "Terminal User Interface" },
  ]}
/>
```

API Reference [#api-reference]

Definition [#definition]

| Prop        | Type               | Default    |
| ----------- | ------------------ | ---------- |
| `items`     | `DefinitionItem[]` | `required` |
| `termColor` | `string`           | -          |

DefinitionItem [#definitionitem]

| Prop          | Type     | Default    |
| ------------- | -------- | ---------- |
| `term`        | `string` | `required` |
| `description` | `string` | `required` |


# Diff View

Unified, split, and inline diff viewer with LCS-based diff algorithm and line numbers



<ComponentPreview base="opentui" name="diff-view-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/diff-view
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="diff-view" title="components/ui/diff-view.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DiffView } from "@/components/ui/diff-view";
```

```tsx
<DiffView
  filename="config.ts"
  oldText={"const port = 3000;\nconst host = 'localhost';"}
  newText={"const port = 8080;\nconst host = 'localhost';\nconst debug = true;"}
/>
```

API Reference [#api-reference]

DiffView [#diffview]

| Prop              | Type                               | Default     |
| ----------------- | ---------------------------------- | ----------- |
| `oldText`         | `string`                           | `required`  |
| `newText`         | `string`                           | `required`  |
| `filename`        | `string`                           | -           |
| `language`        | `string`                           | -           |
| `mode`            | `"unified" \| "split" \| "inline"` | `"unified"` |
| `context`         | `number`                           | `3`         |
| `showLineNumbers` | `boolean`                          | `false`     |


# Directory Tree

Filesystem browser with expand/collapse



<ComponentPreview base="opentui" name="directory-tree-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/directory-tree
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="directory-tree" title="components/ui/directory-tree.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DirectoryTree } from "@/components/ui/directory-tree";
```

```tsx
<DirectoryTree
  rootPath="/home/user/project"
  maxDepth={3}
  label="Project Files"
/>
```

API Reference [#api-reference]

DirectoryTree [#directorytree]

| Prop         | Type                     | Default         |
| ------------ | ------------------------ | --------------- |
| `rootPath`   | `string`                 | `process.cwd()` |
| `onSelect`   | `(path: string) => void` | -               |
| `maxDepth`   | `number`                 | `2`             |
| `showHidden` | `boolean`                | `false`         |
| `label`      | `string`                 | -               |


# Git Status

Git status display (branch, staged, modified, ahead/behind)



<ComponentPreview base="opentui" name="git-status-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/git-status
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="git-status" title="components/ui/git-status.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { GitStatus } from "@/components/ui/git-status";
```

```tsx
<GitStatus branch="main" staged={2} modified={5} ahead={1} behind={0} />
```

API Reference [#api-reference]

GitStatus [#gitstatus]

| Prop       | Type     | Default    |
| ---------- | -------- | ---------- |
| `branch`   | `string` | `required` |
| `staged`   | `number` | `0`        |
| `modified` | `number` | `0`        |
| `ahead`    | `number` | `0`        |
| `behind`   | `number` | `0`        |


# Data

Components for displaying and visualizing structured data in the terminal.



<ComponentsList base="opentui" category="data" />


# JSON

Pretty-printed JSON with collapsible nodes



<ComponentPreview base="opentui" name="json-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/json
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="json" title="components/ui/json.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { JSONView } from "@/components/ui/json";
```

```tsx
<JSONView
  label="package.json"
  data={{
    name: "my-cli",
    version: "1.0.0",
    dependencies: { ink: "^5.0.0" },
  }}
/>
```

API Reference [#api-reference]

JSONView [#jsonview]

| Prop        | Type      | Default    |
| ----------- | --------- | ---------- |
| `data`      | `unknown` | `required` |
| `indent`    | `number`  | `2`        |
| `collapsed` | `boolean` | `false`    |
| `label`     | `string`  | -          |


# Key Value

Aligned key–value pairs



<ComponentPreview base="opentui" name="key-value-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/key-value
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="key-value" title="components/ui/key-value.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { KeyValue } from "@/components/ui/key-value";
```

```tsx
<KeyValue
  items={[
    { key: "Name", value: "my-app" },
    { key: "Version", value: "2.1.0" },
    { key: "License", value: "MIT" },
  ]}
/>
```

API Reference [#api-reference]

KeyValue [#keyvalue]

| Prop         | Type             | Default    |
| ------------ | ---------------- | ---------- |
| `items`      | `KeyValueItem[]` | `required` |
| `keyWidth`   | `number`         | -          |
| `separator`  | `string`         | `":"`      |
| `keyColor`   | `string`         | -          |
| `valueColor` | `string`         | -          |

KeyValueItem [#keyvalueitem]

| Prop    | Type        | Default    |
| ------- | ----------- | ---------- |
| `key`   | `string`    | `required` |
| `value` | `ReactNode` | `required` |
| `color` | `string`    | -          |


# List

Navigable list with optional filtering



<ComponentPreview base="opentui" name="list-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/list
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="list" title="components/ui/list.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { List } from "@/components/ui/list";
```

```tsx
<List
  items={[
    { key: "ts", label: "TypeScript", description: "Typed JavaScript" },
    { key: "rs", label: "Rust", description: "Systems language" },
    { key: "go", label: "Go", description: "Cloud-native language" },
  ]}
  onSelect={(item) => console.log(item.key)}
/>
```

API Reference [#api-reference]

List [#list]

| Prop         | Type                       | Default    |
| ------------ | -------------------------- | ---------- |
| `items`      | `ListItem[]`               | `required` |
| `onSelect`   | `(item: ListItem) => void` | -          |
| `filterable` | `boolean`                  | `false`    |
| `height`     | `number`                   | `10`       |
| `cursor`     | `string`                   | `"›"`      |

ListItem [#listitem]

| Prop          | Type     | Default    |
| ------------- | -------- | ---------- |
| `key`         | `string` | `required` |
| `label`       | `string` | `required` |
| `description` | `string` | -          |
| `color`       | `string` | -          |


# Table

Sortable, selectable, paginated data table



<ComponentPreview base="opentui" name="table-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/table
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="table" title="components/ui/table.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Table } from "@/components/ui/table";
```

```tsx
<Table
  data={[
    { name: "api-server", cpu: "24%", memory: "512 MB" },
    { name: "worker", cpu: "58%", memory: "1.2 GB" },
  ]}
  columns={[
    { key: "name", header: "Service" },
    { key: "cpu", header: "CPU", align: "right" },
    { key: "memory", header: "Memory", align: "right" },
  ]}
/>
```

Examples [#examples]

Sortable [#sortable]

Enable keyboard-driven column sorting with `sortable`. Use arrow keys to navigate columns and press `s` to sort.

<ComponentPreview base="opentui" name="table-sortable" />

Selectable rows [#selectable-rows]

Use `selectable` with `onSelect` to choose a row with the arrow keys and Enter.

<ComponentPreview base="opentui" name="table-selectable" />

API Reference [#api-reference]

Table [#table]

The table draws a fixed-width grid with Unicode box-drawing characters (`╭`, `├`, `│`, …). Width follows column content; it does not stretch to the full terminal width.

| Prop          | Type               | Default    |
| ------------- | ------------------ | ---------- |
| `data`        | `T[]`              | `required` |
| `columns`     | `Column<T>[]`      | `required` |
| `sortable`    | `boolean`          | `false`    |
| `selectable`  | `boolean`          | `false`    |
| `onSelect`    | `(row: T) => void` | -          |
| `maxRows`     | `number`           | `20`       |
| `borderColor` | `string`           | -          |

Column [#column]

| Prop     | Type                            | Default    |
| -------- | ------------------------------- | ---------- |
| `key`    | `keyof T & string`              | `required` |
| `header` | `string`                        | `required` |
| `width`  | `number`                        | -          |
| `align`  | `"left" \| "right" \| "center"` | `"left"`   |


# Tree

Expandable/collapsible tree view



<ComponentPreview base="opentui" name="tree-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tree
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tree" title="components/ui/tree.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tree } from "@/components/ui/tree";
```

```tsx
<Tree
  defaultExpanded={["src"]}
  nodes={[
    {
      key: "src",
      label: "src",
      children: [
        { key: "index", label: "index.ts" },
        { key: "utils", label: "utils.ts" },
      ],
    },
    { key: "pkg", label: "package.json" },
  ]}
/>
```

API Reference [#api-reference]

Tree [#tree]

| Prop              | Type                       | Default    |
| ----------------- | -------------------------- | ---------- |
| `nodes`           | `TreeNode[]`               | `required` |
| `onSelect`        | `(node: TreeNode) => void` | -          |
| `defaultExpanded` | `string[]`                 | `[]`       |
| `expandedIcon`    | `string`                   | `"▼"`      |
| `collapsedIcon`   | `string`                   | `"▶"`      |
| `leafIcon`        | `string`                   | `"•"`      |

TreeNode [#treenode]

| Prop       | Type         | Default    |
| ---------- | ------------ | ---------- |
| `key`      | `string`     | `required` |
| `label`    | `string`     | `required` |
| `children` | `TreeNode[]` | -          |
| `icon`     | `string`     | -          |


# Virtual List

Virtualized list for 10k+ items



<ComponentPreview base="opentui" name="virtual-list-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/virtual-list
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="virtual-list" title="components/ui/virtual-list.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { VirtualList } from "@/components/ui/virtual-list";
```

```tsx
<VirtualList
  items={Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`)}
  height={10}
  renderItem={(item, index, isActive) => <Text bold={isActive}>{item}</Text>}
/>
```

API Reference [#api-reference]

VirtualList [#virtuallist]

| Prop         | Type                                                       | Default    |
| ------------ | ---------------------------------------------------------- | ---------- |
| `items`      | `T[]`                                                      | `required` |
| `renderItem` | `(item: T, index: number, isActive: boolean) => ReactNode` | `required` |
| `height`     | `number`                                                   | `required` |
| `onSelect`   | `(item: T, index: number) => void`                         | -          |
| `cursor`     | `string`                                                   | -          |
| `overscan`   | `number`                                                   | `2`        |


# Alert

Alert box with success/error/warning/info variants



<ComponentPreview base="opentui" name="alert-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/alert
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="alert" title="components/ui/alert.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Alert } from "@/components/ui/alert";
```

```tsx
<Alert variant="success" title="Build complete">
  Everything is ready to ship.
</Alert>
```

Examples [#examples]

Error [#error]

Use `variant="error"` to display an error alert.

<ComponentPreview base="opentui" name="alert-error" />

Warning [#warning]

Use `variant="warning"` to display a warning alert.

<ComponentPreview base="opentui" name="alert-warning" />

Without Border [#without-border]

Set `bordered={false}` to remove the border.

<ComponentPreview base="opentui" name="alert-no-border" />

Custom Icon and Color [#custom-icon-and-color]

Override the icon and color with `icon` and `color` props.

<ComponentPreview base="opentui" name="alert-custom" />

API Reference [#api-reference]

Alert [#alert]

| Prop          | Type                                                                                         | Default  |
| ------------- | -------------------------------------------------------------------------------------------- | -------- |
| `variant`     | `"success" \| "error" \| "warning" \| "info"`                                                | `"info"` |
| `title`       | `string`                                                                                     | -        |
| `children`    | `ReactNode`                                                                                  | -        |
| `icon`        | `string`                                                                                     | -        |
| `bordered`    | `boolean`                                                                                    | `true`   |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | -        |
| `color`       | `string`                                                                                     | -        |
| `paddingX`    | `number`                                                                                     | `1`      |
| `paddingY`    | `number`                                                                                     | `0`      |


# Banner

Full-width announcement banner



<ComponentPreview base="opentui" name="banner-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/banner
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="banner" title="components/ui/banner.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Banner } from "@/components/ui/banner";
```

```tsx
<Banner variant="info" title="Update">
  A new version is available. Run npx update to upgrade.
</Banner>
```

Examples [#examples]

Success Banner [#success-banner]

<ComponentPreview base="opentui" name="banner-success" />

Error with Custom Icon [#error-with-custom-icon]

<ComponentPreview base="opentui" name="banner-error" />

API Reference [#api-reference]

Banner [#banner]

| Prop          | Type                                                       | Default    |
| ------------- | ---------------------------------------------------------- | ---------- |
| `children`    | `ReactNode`                                                | `required` |
| `variant`     | `"info" \| "warning" \| "error" \| "success" \| "neutral"` | `"info"`   |
| `icon`        | `string`                                                   | -          |
| `title`       | `string`                                                   | -          |
| `dismissible` | `boolean`                                                  | `false`    |
| `onDismiss`   | `() => void`                                               | -          |
| `color`       | `string`                                                   | -          |
| `accentChar`  | `string`                                                   | `"┃"`      |
| `gap`         | `number`                                                   | `1`        |


# Feedback

Components for showing progress, status, and notifications in the terminal.



<ComponentsList base="opentui" category="feedback" />


# Multi Progress

Parallel progress display for package managers, build pipelines, and deploy tools



<ComponentPreview base="opentui" name="multi-progress-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/multi-progress
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="multi-progress" title="components/ui/multi-progress.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { MultiProgress } from "@/components/ui/multi-progress";
```

```tsx
<MultiProgress
  items={[
    {
      id: "api",
      label: "API Server",
      value: 80,
      total: 100,
      status: "running",
    },
    { id: "db", label: "Database", value: 100, total: 100, status: "done" },
    { id: "cache", label: "Redis", value: 30, total: 100, status: "running" },
  ]}
/>
```

Examples [#examples]

Compact Mode [#compact-mode]

<ComponentPreview base="opentui" name="multi-progress-compact" />

API Reference [#api-reference]

MultiProgress [#multiprogress]

| Prop          | Type                  | Default    |
| ------------- | --------------------- | ---------- |
| `items`       | `MultiProgressItem[]` | `required` |
| `barWidth`    | `number`              | `20`       |
| `labelWidth`  | `number`              | `20`       |
| `compact`     | `boolean`             | `false`    |
| `showPercent` | `boolean`             | `true`     |

MultiProgressItem [#multiprogressitem]

| Prop         | Type                                          | Default    |
| ------------ | --------------------------------------------- | ---------- |
| `id`         | `string`                                      | `required` |
| `label`      | `string`                                      | `required` |
| `value`      | `number`                                      | `required` |
| `total`      | `number`                                      | `required` |
| `status`     | `"pending" \| "running" \| "done" \| "error"` | -          |
| `statusText` | `string`                                      | -          |


# Progress Bar

Determinate progress bar with percent and value/total display



<ComponentPreview base="opentui" name="progress-bar-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/progress-bar
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="progress-bar" title="components/ui/progress-bar.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ProgressBar } from "@/components/ui/progress-bar";
```

```tsx
<ProgressBar value={42} total={100} label="Uploading" />
```

Examples [#examples]

Custom Characters and Color [#custom-characters-and-color]

<ComponentPreview base="opentui" name="progress-bar-custom" />

API Reference [#api-reference]

ProgressBar [#progressbar]

| Prop          | Type      | Default    |
| ------------- | --------- | ---------- |
| `value`       | `number`  | `required` |
| `total`       | `number`  | -          |
| `width`       | `number`  | `30`       |
| `showPercent` | `boolean` | `true`     |
| `showEta`     | `boolean` | `false`    |
| `fillChar`    | `string`  | `"█"`      |
| `emptyChar`   | `string`  | `"░"`      |
| `color`       | `string`  | -          |
| `label`       | `string`  | -          |


# Progress Circle

Circular progress indicator using Unicode braille



<ComponentPreview base="opentui" name="progress-circle-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/progress-circle
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="progress-circle" title="components/ui/progress-circle.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ProgressCircle } from "@/components/ui/progress-circle";
```

```tsx
<ProgressCircle value={75} size="sm" label="Memory" showPercent />
```

Examples [#examples]

Sizes [#sizes]

<ComponentPreview base="opentui" name="progress-circle-sizes" />

API Reference [#api-reference]

ProgressCircle [#progresscircle]

| Prop          | Type                   | Default    |
| ------------- | ---------------------- | ---------- |
| `value`       | `number`               | `required` |
| `size`        | `"sm" \| "md" \| "lg"` | `"sm"`     |
| `color`       | `string`               | -          |
| `label`       | `string`               | -          |
| `showPercent` | `boolean`              | `false`    |


# Skeleton

Shimmer loading placeholder



<ComponentPreview base="opentui" name="skeleton-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/skeleton
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="skeleton" title="components/ui/skeleton.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Skeleton } from "@/components/ui/skeleton";
```

```tsx
<Skeleton width={30} height={3} />
```

Examples [#examples]

Static (No Animation) [#static-no-animation]

<ComponentPreview base="opentui" name="skeleton-static" />

API Reference [#api-reference]

Skeleton [#skeleton]

| Prop       | Type      | Default |
| ---------- | --------- | ------- |
| `width`    | `number`  | `20`    |
| `height`   | `number`  | `1`     |
| `animated` | `boolean` | `true`  |


# Spinner

Animated spinner with 12+ styles



<ComponentPreview base="opentui" name="spinner-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/spinner
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-animation.ts" title="hooks/use-animation.ts" />

      <ComponentSource base="opentui" name="spinner" title="components/ui/spinner.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Spinner } from "@/components/ui/spinner";
```

```tsx
<Spinner type="dots" label="Loading components" />
```

Examples [#examples]

Spinner Styles [#spinner-styles]

Multiple built-in animation styles.

<ComponentPreview base="opentui" name="spinner-styles" />

API Reference [#api-reference]

Spinner [#spinner]

| Prop     | Type                                                                              | Default  |
| -------- | --------------------------------------------------------------------------------- | -------- |
| `type`   | `SpinnerName` from [`cli-spinners`](https://github.com/sindresorhus/cli-spinners) | `"dots"` |
| `label`  | `string`                                                                          | -        |
| `color`  | `string`                                                                          | -        |
| `fps`    | `number` — used only with custom `frames`                                         | `12`     |
| `frames` | `string[]`                                                                        | -        |


# Status Message

Inline status message with icon and color



<ComponentPreview base="opentui" name="status-message-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/status-message
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="status-message" title="components/ui/status-message.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { StatusMessage } from "@/components/ui/status-message";
```

```tsx
<StatusMessage variant="success">All tests passed.</StatusMessage>
```

Examples [#examples]

Variants [#variants]

<ComponentPreview base="opentui" name="status-message-variants" />

API Reference [#api-reference]

StatusMessage [#statusmessage]

| Prop       | Type                                                                    | Default    |
| ---------- | ----------------------------------------------------------------------- | ---------- |
| `variant`  | `"success" \| "error" \| "warning" \| "info" \| "loading" \| "pending"` | `"info"`   |
| `children` | `ReactNode`                                                             | `required` |
| `icon`     | `string`                                                                | -          |


# Toast

Auto-dismissing toast notification



<ComponentPreview base="opentui" name="toast-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/toast
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="toast" title="components/ui/toast.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Toast } from "@/components/ui/toast";
```

```tsx
<Toast
  variant="success"
  message="Settings saved successfully."
  duration={5000}
  onDismiss={() => console.log("toast closed")}
/>
```

Examples [#examples]

Error with Longer Duration [#error-with-longer-duration]

<ComponentPreview base="opentui" name="toast-error" />

API Reference [#api-reference]

Toast [#toast]

| Prop        | Type                                          | Default    |
| ----------- | --------------------------------------------- | ---------- |
| `message`   | `string`                                      | `required` |
| `variant`   | `"success" \| "error" \| "warning" \| "info"` | `"info"`   |
| `duration`  | `number`                                      | `3000`     |
| `onDismiss` | `() => void`                                  | -          |
| `icon`      | `string`                                      | -          |


# Confirm

Yes/No confirmation prompt



<ComponentPreview base="opentui" name="confirm-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/confirm
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="confirm" title="components/ui/confirm.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Confirm } from "@/components/ui/confirm";
```

```tsx
<Confirm
  message="Are you sure you want to continue?"
  onConfirm={() => console.log("Confirmed")}
  onCancel={() => console.log("Cancelled")}
/>
```

API Reference [#api-reference]

Confirm [#confirm]

| Prop           | Type                    | Default     |
| -------------- | ----------------------- | ----------- |
| `message`      | `string`                | `required`  |
| `onConfirm`    | `() => void`            | -           |
| `onCancel`     | `() => void`            | -           |
| `confirmLabel` | `string`                | `"Yes"`     |
| `cancelLabel`  | `string`                | `"No"`      |
| `defaultValue` | `boolean`               | `false`     |
| `variant`      | `"default" \| "danger"` | `"default"` |


# Date Picker

Calendar date picker with keyboard navigation



<ComponentPreview base="opentui" name="date-picker-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/date-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="date-picker" title="components/ui/date-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { DatePicker } from "@/components/ui/date-picker";
```

```tsx
<DatePicker
  label="Birth date"
  value={new Date(2026, 0, 15)}
  onChange={(date) => console.log("Selected:", date)}
  onSubmit={(date) => console.log("Submitted:", date)}
/>
```

API Reference [#api-reference]

DatePicker [#datepicker]

| Prop        | Type                   | Default |
| ----------- | ---------------------- | ------- |
| `value`     | `Date`                 | -       |
| `onChange`  | `(date: Date) => void` | -       |
| `onSubmit`  | `(date: Date) => void` | -       |
| `label`     | `string`               | -       |
| `minDate`   | `Date`                 | -       |
| `maxDate`   | `Date`                 | -       |
| `autoFocus` | `boolean`              | `false` |
| `id`        | `string`               | -       |


# File Picker

Interactive file browser and picker



<ComponentPreview base="opentui" name="file-picker-demo" />

<Callout type="info">
  File picker requires Node.js filesystem access and may not render in the
  browser preview.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/file-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="file-picker" title="components/ui/file-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { FilePicker } from "@/components/ui/file-picker";
```

```tsx
<FilePicker
  label="Select a config file"
  extensions={[".json", ".yaml", ".yml"]}
  onSubmit={(path) => console.log("Selected:", path)}
/>
```

API Reference [#api-reference]

FilePicker [#filepicker]

| Prop         | Type                     | Default         |
| ------------ | ------------------------ | --------------- |
| `value`      | `string`                 | -               |
| `onChange`   | `(path: string) => void` | -               |
| `onSubmit`   | `(path: string) => void` | -               |
| `label`      | `string`                 | -               |
| `startDir`   | `string`                 | `process.cwd()` |
| `extensions` | `string[]`               | -               |
| `dirsOnly`   | `boolean`                | `false`         |
| `autoFocus`  | `boolean`                | `false`         |
| `id`         | `string`                 | -               |
| `width`      | `number`                 | `50`            |
| `maxVisible` | `number`                 | `8`             |


# Form Field

Form field wrapper with label, hint, and error



<ComponentPreview base="opentui" name="form-field-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/form-field
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="form-field" title="components/ui/form-field.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { FormField } from "@/components/ui/form-field";
```

```tsx
<FormField label="Username" hint="Must be unique" required>
  <Text>my-input-here</Text>
</FormField>
```

API Reference [#api-reference]

FormField [#formfield]

| Prop         | Type        | Default    |
| ------------ | ----------- | ---------- |
| `label`      | `string`    | `required` |
| `children`   | `ReactNode` | `required` |
| `error`      | `string`    | -          |
| `hint`       | `string`    | -          |
| `required`   | `boolean`   | -          |
| `gap`        | `number`    | `0`        |
| `errorIcon`  | `string`    | `"✗"`      |
| `labelColor` | `string`    | -          |


# Form

Form container with validation, Ctrl+S submit, and dirty tracking



<ComponentPreview base="opentui" name="form-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/form
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="form" title="components/ui/form.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Form } from "@/components/ui/form";
```

```tsx
<Form
  initialValues={{ name: "", email: "" }}
  fields={[
    { name: "name", validate: (v) => (v ? null : "Name is required") },
    { name: "email", validate: (v) => (v ? null : "Email is required") },
  ]}
  onSubmit={(values) => console.log("Submitted:", values)}
>
  <Text>Name and email form (Ctrl+S to submit)</Text>
</Form>
```

API Reference [#api-reference]

Form [#form]

| Prop            | Type                                        | Default    |
| --------------- | ------------------------------------------- | ---------- |
| `onSubmit`      | `(values: Record<string, unknown>) => void` | `required` |
| `initialValues` | `Record<string, unknown>`                   | `{}`       |
| `fields`        | `FormField[]`                               | `[]`       |
| `children`      | `ReactNode`                                 | `required` |


# Forms

Components for building multi-step forms and handling user submissions.



<ComponentsList base="opentui" category="forms" />


# Time Picker

Time picker with hour/minute/second spinners



<ComponentPreview base="opentui" name="time-picker-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/time-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="time-picker" title="components/ui/time-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TimePicker } from "@/components/ui/time-picker";
```

```tsx
<TimePicker
  label="Meeting time"
  value={{ hours: 14, minutes: 30 }}
  onChange={(time) => console.log("Changed:", time)}
  onSubmit={(time) => console.log("Submitted:", time)}
/>
```

API Reference [#api-reference]

TimePicker [#timepicker]

| Prop        | Type                                                 | Default |
| ----------- | ---------------------------------------------------- | ------- |
| `value`     | `{ hours: number; minutes: number }`                 | -       |
| `onChange`  | `(time: { hours: number; minutes: number }) => void` | -       |
| `onSubmit`  | `(time: { hours: number; minutes: number }) => void` | -       |
| `label`     | `string`                                             | -       |
| `format`    | `12 \| 24`                                           | `24`    |
| `autoFocus` | `boolean`                                            | `false` |
| `id`        | `string`                                             | -       |


# Wizard

Multi-step wizard with per-step validation



<ComponentPreview base="opentui" name="wizard-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/wizard
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="wizard" title="components/ui/wizard.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Wizard } from "@/components/ui/wizard";
```

```tsx
<Wizard
  steps={[
    {
      key: "install",
      title: "Install",
      content: <Text>Install dependencies</Text>,
    },
    {
      key: "configure",
      title: "Configure",
      content: <Text>Set up your preferences</Text>,
    },
    {
      key: "finish",
      title: "Finish",
      content: <Text>Review and confirm your settings</Text>,
    },
  ]}
  onComplete={(keys) => console.log("Completed:", keys)}
  onCancel={() => console.log("Cancelled")}
/>
```

API Reference [#api-reference]

Wizard [#wizard]

| Prop           | Type                                 | Default    |
| -------------- | ------------------------------------ | ---------- |
| `steps`        | `WizardStep[]`                       | `required` |
| `onComplete`   | `(completedSteps: string[]) => void` | -          |
| `onCancel`     | `() => void`                         | -          |
| `showProgress` | `boolean`                            | `true`     |

WizardStep [#wizardstep]

| Prop       | Type                      | Default    |
| ---------- | ------------------------- | ---------- |
| `key`      | `string`                  | `required` |
| `title`    | `string`                  | `required` |
| `content`  | `ReactNode`               | `required` |
| `validate` | `() => boolean \| string` | -          |


# Email Input

Email input with validation and domain suggestions



<ComponentPreview base="opentui" name="email-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/email-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="email-input" title="components/ui/email-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { EmailInput } from "@/components/ui/email-input";
```

```tsx
<EmailInput
  label="Email"
  placeholder="you@example.com"
  onSubmit={(value) => console.log("Submitted:", value)}
/>
```

API Reference [#api-reference]

EmailInput [#emailinput]

| Prop          | Type                      | Default                                                    |
| ------------- | ------------------------- | ---------------------------------------------------------- |
| `value`       | `string`                  | -                                                          |
| `onChange`    | `(value: string) => void` | -                                                          |
| `onSubmit`    | `(value: string) => void` | -                                                          |
| `label`       | `string`                  | -                                                          |
| `placeholder` | `string`                  | `"you@example.com"`                                        |
| `autoFocus`   | `boolean`                 | `false`                                                    |
| `id`          | `string`                  | -                                                          |
| `width`       | `number`                  | `40`                                                       |
| `suggestions` | `string[]`                | `["gmail.com", "yahoo.com", "hotmail.com", "outlook.com"]` |


# Input

Text input components for capturing user input in the terminal.



<ComponentsList base="opentui" category="input" />


# Masked Input

Masked input for phone, date, credit card formats



<ComponentPreview base="opentui" name="masked-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/masked-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="masked-input" title="components/ui/masked-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { MaskedInput } from "@/components/ui/masked-input";
```

```tsx
<MaskedInput
  mask="(###) ###-####"
  label="Phone Number"
  placeholder="(555) 123-4567"
/>
```

API Reference [#api-reference]

MaskedInput [#maskedinput]

| Prop          | Type                      | Default    |
| ------------- | ------------------------- | ---------- |
| `mask`        | `string`                  | `required` |
| `value`       | `string`                  | -          |
| `onChange`    | `(value: string) => void` | -          |
| `onSubmit`    | `(value: string) => void` | -          |
| `label`       | `string`                  | -          |
| `placeholder` | `string`                  | -          |
| `autoFocus`   | `boolean`                 | `false`    |
| `id`          | `string`                  | -          |
| `width`       | `number`                  | `40`       |


# Number Input

Numeric input with increment/decrement and bounds



<ComponentPreview base="opentui" name="number-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/number-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="number-input" title="components/ui/number-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { NumberInput } from "@/components/ui/number-input";
```

```tsx
<NumberInput
  label="Quantity"
  min={0}
  max={100}
  step={1}
  onChange={(value) => console.log("Value:", value)}
/>
```

API Reference [#api-reference]

NumberInput [#numberinput]

| Prop          | Type                                                                                         | Default                  |
| ------------- | -------------------------------------------------------------------------------------------- | ------------------------ |
| `value`       | `number`                                                                                     | -                        |
| `onChange`    | `(value: number) => void`                                                                    | -                        |
| `onSubmit`    | `(value: number) => void`                                                                    | -                        |
| `min`         | `number`                                                                                     | -                        |
| `max`         | `number`                                                                                     | -                        |
| `step`        | `number`                                                                                     | `1`                      |
| `placeholder` | `string`                                                                                     | `""`                     |
| `label`       | `string`                                                                                     | -                        |
| `id`          | `string`                                                                                     | -                        |
| `format`      | `(n: number) => string`                                                                      | -                        |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`                |
| `paddingX`    | `number`                                                                                     | `1`                      |
| `cursor`      | `string`                                                                                     | `"█"`                    |
| `stepHint`    | `string`                                                                                     | `"↑ +{step}  ↓ -{step}"` |


# Password Input

Password input with masked characters and reveal toggle



<ComponentPreview base="opentui" name="password-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/password-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="password-input" title="components/ui/password-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { PasswordInput } from "@/components/ui/password-input";
```

```tsx
<PasswordInput
  label="Password"
  placeholder="Enter password"
  showToggle
  onSubmit={(value) => console.log("Password:", value)}
/>
```

API Reference [#api-reference]

PasswordInput [#passwordinput]

| Prop          | Type                                                                                         | Default   |
| ------------- | -------------------------------------------------------------------------------------------- | --------- |
| `value`       | `string`                                                                                     | -         |
| `onChange`    | `(value: string) => void`                                                                    | -         |
| `onSubmit`    | `(value: string) => void`                                                                    | -         |
| `placeholder` | `string`                                                                                     | `""`      |
| `mask`        | `string`                                                                                     | `"●"`     |
| `showToggle`  | `boolean`                                                                                    | `false`   |
| `label`       | `string`                                                                                     | -         |
| `id`          | `string`                                                                                     | -         |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`    | `number`                                                                                     | `1`       |
| `width`       | `number`                                                                                     | -         |
| `cursor`      | `string`                                                                                     | `"█"`     |


# Path Input

Filesystem path input with tab autocomplete



<ComponentPreview base="opentui" name="path-input-demo" />

<Callout type="info">
  Path input requires Node.js filesystem access and may not render in the
  browser preview.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/path-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="path-input" title="components/ui/path-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { PathInput } from "@/components/ui/path-input";
```

```tsx
<PathInput
  label="Project Directory"
  placeholder="/home/user/projects"
  onSubmit={(path) => console.log("Selected:", path)}
/>
```

API Reference [#api-reference]

PathInput [#pathinput]

| Prop          | Type                      | Default |
| ------------- | ------------------------- | ------- |
| `value`       | `string`                  | -       |
| `onChange`    | `(value: string) => void` | -       |
| `onSubmit`    | `(value: string) => void` | -       |
| `label`       | `string`                  | -       |
| `placeholder` | `string`                  | `"/"`   |
| `autoFocus`   | `boolean`                 | `false` |
| `id`          | `string`                  | -       |
| `width`       | `number`                  | `40`    |
| `filter`      | `string`                  | -       |
| `dirsOnly`    | `boolean`                 | `false` |


# Search Input

Fuzzy search input with autocomplete



<ComponentPreview base="opentui" name="search-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/search-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="search-input" title="components/ui/search-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { SearchInput } from "@/components/ui/search-input";
```

```tsx
<SearchInput
  label="Search Packages"
  options={["react", "vue", "svelte", "angular", "solid"]}
  placeholder="Search..."
  onSelect={(item) => console.log("Selected:", item)}
/>
```

API Reference [#api-reference]

SearchInput [#searchinput]

| Prop           | Type                                                                                         | Default       |
| -------------- | -------------------------------------------------------------------------------------------- | ------------- |
| `options`      | `T[]`                                                                                        | -             |
| `getValue`     | `(item: T) => string`                                                                        | -             |
| `value`        | `string`                                                                                     | -             |
| `onChange`     | `(query: string) => void`                                                                    | -             |
| `onSelect`     | `(item: T) => void`                                                                          | -             |
| `placeholder`  | `string`                                                                                     | `"Search..."` |
| `label`        | `string`                                                                                     | -             |
| `maxResults`   | `number`                                                                                     | `5`           |
| `id`           | `string`                                                                                     | -             |
| `borderStyle`  | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`     |
| `paddingX`     | `number`                                                                                     | `1`           |
| `cursor`       | `string`                                                                                     | `"█"`         |
| `searchIcon`   | `string`                                                                                     | `"🔍 "`       |
| `resultCursor` | `string`                                                                                     | `"› "`        |


# Text Area

Multi-line text editor with word wrap



<ComponentPreview base="opentui" name="text-area-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/text-area
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="text-area" title="components/ui/text-area.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TextArea } from "@/components/ui/text-area";
```

```tsx
<TextArea
  label="Description"
  placeholder="Enter a description..."
  rows={4}
  onSubmit={(value) => console.log("Submitted:", value)}
/>
```

API Reference [#api-reference]

TextArea [#textarea]

| Prop          | Type                                                                                         | Default   |
| ------------- | -------------------------------------------------------------------------------------------- | --------- |
| `value`       | `string`                                                                                     | -         |
| `onChange`    | `(value: string) => void`                                                                    | -         |
| `onSubmit`    | `(value: string) => void`                                                                    | -         |
| `placeholder` | `string`                                                                                     | `""`      |
| `rows`        | `number`                                                                                     | `4`       |
| `label`       | `string`                                                                                     | -         |
| `id`          | `string`                                                                                     | -         |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`    | `number`                                                                                     | `1`       |
| `cursor`      | `string`                                                                                     | `"█"`     |


# Text Input

Single-line text input with placeholder, validation, mask



<ComponentPreview base="opentui" name="text-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/text-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="text-input" title="components/ui/text-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TextInput } from "@/components/ui/text-input";
```

```tsx
<TextInput
  label="Project Name"
  placeholder="my-project"
  onSubmit={(value) => console.log("Name:", value)}
/>
```

Examples [#examples]

Placeholder [#placeholder]

A text input with placeholder text.

<ComponentPreview base="opentui" name="text-input-placeholder" />

With Label [#with-label]

Multiple labeled inputs stacked together.

<ComponentPreview base="opentui" name="text-input-label" />

Cursor and editing [#cursor-and-editing]

With `showCursor` (default `true`), use the left and right arrow keys to move the insertion point; type and Backspace apply at the cursor.

<ComponentPreview base="opentui" name="text-input-cursor" />

API Reference [#api-reference]

TextInput [#textinput]

| Prop                  | Type                                                                                         | Default   |
| --------------------- | -------------------------------------------------------------------------------------------- | --------- |
| `value`               | `string`                                                                                     | -         |
| `onChange`            | `(value: string) => void`                                                                    | -         |
| `onSubmit`            | `(value: string) => void`                                                                    | -         |
| `placeholder`         | `string`                                                                                     | `""`      |
| `mask`                | `string`                                                                                     | -         |
| `showCursor`          | `boolean`                                                                                    | `true`    |
| `highlightPastedText` | `boolean`                                                                                    | `false`   |
| `validate`            | `(value: string) => string\|null`                                                            | -         |
| `width`               | `number`                                                                                     | `40`      |
| `label`               | `string`                                                                                     | -         |
| `autoFocus`           | `boolean`                                                                                    | `false`   |
| `id`                  | `string`                                                                                     | -         |
| `bordered`            | `boolean`                                                                                    | `true`    |
| `borderStyle`         | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`            | `number`                                                                                     | `1`       |
| `cursor`              | `string`                                                                                     | `"█"`     |


# Aspect Ratio

Constrains children to a given aspect ratio



<ComponentPreview base="opentui" name="aspect-ratio-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/aspect-ratio
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="aspect-ratio" title="components/ui/aspect-ratio.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { AspectRatio } from "@/components/ui/aspect-ratio";
```

```tsx
<AspectRatio ratio={16 / 9} width={60}>
  <Text>Widescreen content</Text>
</AspectRatio>
```

API Reference [#api-reference]

AspectRatio [#aspectratio]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `children` | `ReactNode` | `required` |
| `ratio`    | `number`    | `16 / 9`   |
| `width`    | `number`    | `80`       |


# Box

Enhanced flexbox container with theme-aware borders



<ComponentPreview base="opentui" name="box-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/box
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="box" title="components/ui/box.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Box } from "@/components/ui/box";
```

```tsx
<Box border borderVariant="focus" padding={1}>
  <Text>Focused container</Text>
</Box>
```

API Reference [#api-reference]

Box [#box]

| Prop            | Type                                                                   | Default     |
| --------------- | ---------------------------------------------------------------------- | ----------- |
| `border`        | `boolean`                                                              | -           |
| `borderVariant` | `"default" \| "muted" \| "focus" \| "success" \| "error" \| "warning"` | `"default"` |
| `borderColor`   | `string`                                                               | -           |
| `children`      | `ReactNode`                                                            | -           |
| `...props`      | OpenTUI box props                                                      | —           |


# Center

Centers children horizontally and vertically



<ComponentPreview base="opentui" name="center-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/center
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="center" title="components/ui/center.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Center } from "@/components/ui/center";
```

```tsx
<Center>
  <Text>Centered content</Text>
</Center>
```

API Reference [#api-reference]

Center [#center]

| Prop       | Type                                   | Default    |
| ---------- | -------------------------------------- | ---------- |
| `children` | `ReactNode`                            | `required` |
| `axis`     | `"both" \| "horizontal" \| "vertical"` | `"both"`   |


# Columns

Multi-column layout with configurable widths



<ComponentPreview base="opentui" name="columns-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/columns
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="columns" title="components/ui/columns.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Columns } from "@/components/ui/columns";
```

```tsx
<Columns gap={2} align="center">
  <Text>Left</Text>
  <Text>Right</Text>
</Columns>
```

API Reference [#api-reference]

Columns [#columns]

| Prop       | Type                            | Default    |
| ---------- | ------------------------------- | ---------- |
| `children` | `ReactNode`                     | `required` |
| `gap`      | `number`                        | `0`        |
| `align`    | `"top" \| "center" \| "bottom"` | `"top"`    |


# Divider

Horizontal or vertical divider / rule



<ComponentPreview base="opentui" name="divider-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/divider
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="divider" title="components/ui/divider.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Divider } from "@/components/ui/divider";
```

```tsx
<Divider label="Section" />
```

Examples [#examples]

Vertical rule and label styling [#vertical-rule-and-label-styling]

Use `dividerChar` and `height` for vertical rules; `titlePadding` and `labelColor` adjust the labeled horizontal variant.

<ComponentPreview base="opentui" name="divider-custom" />

API Reference [#api-reference]

Divider [#divider]

| Prop           | Type                             | Default        |
| -------------- | -------------------------------- | -------------- |
| `variant`      | `"single" \| "double" \| "bold"` | `"single"`     |
| `orientation`  | `"horizontal" \| "vertical"`     | `"horizontal"` |
| `color`        | `string`                         | -              |
| `label`        | `string`                         | -              |
| `labelColor`   | `string`                         | -              |
| `dividerChar`  | `string`                         | -              |
| `titlePadding` | `number`                         | `1`            |
| `padding`      | `number`                         | `0`            |
| `height`       | `number`                         | `1`            |
| `width`        | `number \| "auto"`               | `"auto"`       |

On horizontal dividers, the rule uses OpenTUI border segments; `dividerChar` applies to **vertical** orientation.


# Grid

Rows × columns grid layout



<ComponentPreview base="opentui" name="grid-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/grid
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="grid" title="components/ui/grid.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Grid } from "@/components/ui/grid";
```

```tsx
<Grid columns={3} gap={1}>
  <Text>A</Text>
  <Text>B</Text>
  <Text>C</Text>
  <Text>D</Text>
  <Text>E</Text>
  <Text>F</Text>
</Grid>
```

API Reference [#api-reference]

Grid [#grid]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `columns`  | `number`    | `required` |
| `gap`      | `number`    | `0`        |
| `children` | `ReactNode` | `required` |


# Layout

Components for structuring and positioning content in your terminal UI.



<ComponentsList base="opentui" category="layout" />


# Scroll View

Scrollable container with scrollbar



<ComponentPreview base="opentui" name="scroll-view-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/scroll-view
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="scroll-view" title="components/ui/scroll-view.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ScrollView } from "@/components/ui/scroll-view";
```

```tsx
<ScrollView height={5} contentHeight={20}>
  <Text>Line 1</Text>
  <Text>Line 2</Text>
  <Text>Line 3</Text>
</ScrollView>
```

Examples [#examples]

Scrollbar and keys [#scrollbar-and-keys]

Set `contentHeight` to the total line count of scrollable content so the thumb size reflects how much is hidden. Use arrow keys, Page Up/Down, Home, and End to scroll.

<ComponentPreview base="opentui" name="scroll-view-scrollbar" />

API Reference [#api-reference]

ScrollView [#scrollview]

| Prop             | Type        | Default    |
| ---------------- | ----------- | ---------- |
| `height`         | `number`    | `required` |
| `children`       | `ReactNode` | `required` |
| `contentHeight`  | `number`    | `0`        |
| `showScrollbar`  | `boolean`   | `true`     |
| `scrollbarColor` | `string`    | -          |
| `thumbColor`     | `string`    | -          |
| `trackChar`      | `string`    | `"│"`      |
| `thumbChar`      | `string`    | `"█"`      |


# Spacer

Flexible space between flex children



<ComponentPreview base="opentui" name="spacer-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/spacer
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="spacer" title="components/ui/spacer.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Spacer } from "@/components/ui/spacer";
```

```tsx
<Box flexDirection="row">
  <Text>Left</Text>
  <Spacer />
  <Text>Right</Text>
</Box>
```

API Reference [#api-reference]

Spacer [#spacer]

| Prop        | Type                         | Default        |
| ----------- | ---------------------------- | -------------- |
| `size`      | `number`                     | -              |
| `direction` | `"horizontal" \| "vertical"` | `"horizontal"` |


# Stack

Vertical/horizontal stack with gap



<ComponentPreview base="opentui" name="stack-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/stack
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="stack" title="components/ui/stack.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Stack } from "@/components/ui/stack";
```

```tsx
<Stack direction="vertical" gap={1}>
  <Text>First</Text>
  <Text>Second</Text>
  <Text>Third</Text>
</Stack>
```

API Reference [#api-reference]

Stack [#stack]

| Prop             | Type                                                                          | Default      |
| ---------------- | ----------------------------------------------------------------------------- | ------------ |
| `direction`      | `"vertical" \| "horizontal"`                                                  | `"vertical"` |
| `gap`            | `number`                                                                      | `0`          |
| `children`       | `ReactNode`                                                                   | `required`   |
| `width`          | `number \| string`                                                            | -            |
| `height`         | `number \| string`                                                            | -            |
| `alignItems`     | `"flex-start" \| "center" \| "flex-end"`                                      | -            |
| `justifyContent` | `"flex-start" \| "center" \| "flex-end" \| "space-between" \| "space-around"` | -            |


# Breadcrumb

Breadcrumb navigation trail



<ComponentPreview base="opentui" name="breadcrumb-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/breadcrumb
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="breadcrumb" title="components/ui/breadcrumb.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";
```

```tsx
<Breadcrumb
  items={[
    { key: "home", label: "Home", onSelect: () => {} },
    { key: "docs", label: "Docs" },
  ]}
  activeKey="docs"
/>
```

API Reference [#api-reference]

Breadcrumb [#breadcrumb]

| Prop        | Type               | Default    |
| ----------- | ------------------ | ---------- |
| `items`     | `BreadcrumbItem[]` | `required` |
| `separator` | `string`           | `"›"`      |
| `activeKey` | `string`           | -          |

BreadcrumbItem [#breadcrumbitem]

| Prop       | Type         | Default    |
| ---------- | ------------ | ---------- |
| `label`    | `string`     | `required` |
| `key`      | `string`     | `required` |
| `onSelect` | `() => void` | -          |


# Command Palette

VS Code–style command palette with fuzzy search



<ComponentPreview base="opentui" name="command-palette-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/command-palette
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="command-palette" title="components/ui/command-palette.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { CommandPalette } from "@/components/ui/command-palette";
```

```tsx
<CommandPalette
  isOpen={true}
  onClose={() => setOpen(false)}
  commands={[
    { id: "save", label: "Save", onSelect: () => {} },
    { id: "quit", label: "Quit", onSelect: () => {} },
  ]}
/>
```

API Reference [#api-reference]

CommandPalette [#commandpalette]

| Prop          | Type         | Default               |
| ------------- | ------------ | --------------------- |
| `commands`    | `Command[]`  | `required`            |
| `isOpen`      | `boolean`    | `required`            |
| `onClose`     | `() => void` | `required`            |
| `placeholder` | `string`     | `"Type a command..."` |
| `maxItems`    | `number`     | `8`                   |

Command [#command]

| Prop          | Type         | Default    |
| ------------- | ------------ | ---------- |
| `id`          | `string`     | `required` |
| `label`       | `string`     | `required` |
| `description` | `string`     | -          |
| `shortcut`    | `string`     | -          |
| `onSelect`    | `() => void` | `required` |
| `group`       | `string`     | -          |


# Navigation

Components for navigating between views and content in the terminal.



<ComponentsList base="opentui" category="navigation" />


# Menu

Dropdown menu with nested submenus



<ComponentPreview base="opentui" name="menu-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/menu
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="menu" title="components/ui/menu.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Menu } from "@/components/ui/menu";
```

```tsx
<Menu
  title="File"
  items={[
    { key: "new", label: "New File", shortcut: "⌘N" },
    { key: "save", label: "Save", shortcut: "⌘S" },
  ]}
  onSelect={(item) => console.log(item.key)}
/>
```

API Reference [#api-reference]

Menu [#menu]

| Prop       | Type                       | Default    |
| ---------- | -------------------------- | ---------- |
| `items`    | `MenuItem[]`               | `required` |
| `onSelect` | `(item: MenuItem) => void` | -          |
| `title`    | `string`                   | -          |

MenuItem [#menuitem]

| Prop        | Type         | Default    |
| ----------- | ------------ | ---------- |
| `key`       | `string`     | `required` |
| `label`     | `string`     | `required` |
| `icon`      | `string`     | -          |
| `shortcut`  | `string`     | -          |
| `disabled`  | `boolean`    | -          |
| `separator` | `boolean`    | -          |
| `children`  | `MenuItem[]` | -          |


# Pagination

Page navigation with prev/next and jump



<ComponentPreview base="opentui" name="pagination-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/pagination
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="pagination" title="components/ui/pagination.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Pagination } from "@/components/ui/pagination";
```

```tsx
<Pagination total={10} current={page} onChange={(p) => setPage(p)} />
```

API Reference [#api-reference]

Pagination [#pagination]

| Prop        | Type                     | Default    |
| ----------- | ------------------------ | ---------- |
| `total`     | `number`                 | `required` |
| `current`   | `number`                 | `required` |
| `onChange`  | `(page: number) => void` | -          |
| `showEdges` | `boolean`                | `true`     |
| `siblings`  | `number`                 | `1`        |


# Sidebar

Collapsible navigation sidebar panel



<ComponentPreview base="opentui" name="sidebar-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/sidebar
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="sidebar" title="components/ui/sidebar.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Sidebar } from "@/components/ui/sidebar";
```

```tsx
<Sidebar
  title="Explorer"
  activeKey="inbox"
  items={[
    { key: "inbox", label: "Inbox", icon: "📥", badge: 3 },
    { key: "drafts", label: "Drafts", icon: "📝" },
  ]}
  onSelect={(key) => console.log(key)}
/>
```

API Reference [#api-reference]

Sidebar [#sidebar]

| Prop        | Type                    | Default    |
| ----------- | ----------------------- | ---------- |
| `items`     | `SidebarItem[]`         | `required` |
| `activeKey` | `string`                | -          |
| `onSelect`  | `(key: string) => void` | -          |
| `collapsed` | `boolean`               | `false`    |
| `width`     | `number`                | `20`       |
| `title`     | `string`                | -          |

SidebarItem [#sidebaritem]

| Prop       | Type               | Default    |
| ---------- | ------------------ | ---------- |
| `key`      | `string`           | `required` |
| `label`    | `string`           | `required` |
| `icon`     | `string`           | -          |
| `badge`    | `string \| number` | -          |
| `children` | `SidebarItem[]`    | -          |


# Tabbed Content

Tab bar wired to content panels



<ComponentPreview base="opentui" name="tabbed-content-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tabbed-content
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tabbed-content" title="components/ui/tabbed-content.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TabbedContent } from "@/components/ui/tabbed-content";
```

```tsx
<TabbedContent
  defaultTab="overview"
  tabs={[
    {
      id: "overview",
      label: "Overview",
      content: <Text>Overview content.</Text>,
    },
    { id: "logs", label: "Logs", content: <Text>Logs content.</Text> },
  ]}
/>
```

API Reference [#api-reference]

TabbedContent [#tabbedcontent]

| Prop          | Type                                | Default       |
| ------------- | ----------------------------------- | ------------- |
| `tabs`        | `TabbedContentTab[]`                | `required`    |
| `defaultTab`  | `string`                            | -             |
| `activeTab`   | `string`                            | -             |
| `onChange`    | `(id: string) => void`              | -             |
| `tabBarStyle` | `"underline" \| "box" \| "minimal"` | `"underline"` |

TabbedContentTab [#tabbedcontenttab]

| Prop       | Type        | Default    |
| ---------- | ----------- | ---------- |
| `id`       | `string`    | `required` |
| `label`    | `string`    | `required` |
| `content`  | `ReactNode` | `required` |
| `disabled` | `boolean`   | -          |


# Tabs

Tab bar with left/right arrow and tab-key navigation



<ComponentPreview base="opentui" name="tabs-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tabs
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tabs" title="components/ui/tabs.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tabs } from "@/components/ui/tabs";
```

```tsx
<Tabs
  defaultTab="general"
  tabs={[
    {
      key: "general",
      label: "General",
      content: <Text>General settings.</Text>,
    },
    {
      key: "appearance",
      label: "Appearance",
      content: <Text>Theme config.</Text>,
    },
  ]}
/>
```

API Reference [#api-reference]

Tabs [#tabs]

| Prop             | Type                                                                                         | Default    |
| ---------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `tabs`           | `Tab[]`                                                                                      | `required` |
| `defaultTab`     | `string`                                                                                     | -          |
| `activeTab`      | `string`                                                                                     | -          |
| `onTabChange`    | `(key: string) => void`                                                                      | -          |
| `borderColor`    | `string`                                                                                     | -          |
| `borderStyle`    | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"` |
| `separator`      | `string`                                                                                     | `" │ "`    |
| `tabBarPaddingX` | `number`                                                                                     | `2`        |
| `paddingX`       | `number`                                                                                     | `1`        |
| `paddingY`       | `number`                                                                                     | `0`        |

Tab [#tab]

| Prop      | Type        | Default    |
| --------- | ----------- | ---------- |
| `key`     | `string`    | `required` |
| `label`   | `string`    | `required` |
| `content` | `ReactNode` | `required` |


# Dialog

Confirmation dialog with OK/Cancel actions



<ComponentPreview base="opentui" name="dialog-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/dialog
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="dialog" title="components/ui/dialog.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Dialog } from "@/components/ui/dialog";
```

```tsx
<Dialog
  isOpen={true}
  title="Save changes?"
  onConfirm={() => save()}
  onCancel={() => discard()}
>
  <Text>You have unsaved changes. Would you like to save them?</Text>
</Dialog>
```

API Reference [#api-reference]

Dialog [#dialog]

| Prop           | Type                    | Default     |
| -------------- | ----------------------- | ----------- |
| `title`        | `string`                | -           |
| `children`     | `ReactNode`             | `required`  |
| `confirmLabel` | `string`                | `"OK"`      |
| `cancelLabel`  | `string`                | `"Cancel"`  |
| `onConfirm`    | `() => void`            | -           |
| `onCancel`     | `() => void`            | -           |
| `variant`      | `"default" \| "danger"` | `"default"` |
| `isOpen`       | `boolean`               | `false`     |


# Drawer

Slide-in panel from any edge



<ComponentPreview base="opentui" name="drawer-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/drawer
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="drawer" title="components/ui/drawer.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Drawer } from "@/components/ui/drawer";
```

```tsx
<Drawer
  isOpen={true}
  edge="right"
  title="Details"
  width={40}
  onClose={() => close()}
>
  <Text>Name: my-project</Text>
  <Text>Status: active</Text>
</Drawer>
```

API Reference [#api-reference]

Drawer [#drawer]

| Prop       | Type                                     | Default    |
| ---------- | ---------------------------------------- | ---------- |
| `isOpen`   | `boolean`                                | `false`    |
| `edge`     | `"left" \| "right" \| "top" \| "bottom"` | `"right"`  |
| `title`    | `string`                                 | -          |
| `children` | `ReactNode`                              | `required` |
| `onClose`  | `() => void`                             | -          |
| `width`    | `number`                                 | `40`       |
| `height`   | `number`                                 | `10`       |


# Overlays

Components for dialogs, modals, tooltips, and other overlay content.



<ComponentsList base="opentui" category="overlays" />


# Modal

Focus-trapped overlay modal, close with Esc



<ComponentPreview base="opentui" name="modal-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/modal
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="modal" title="components/ui/modal.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Modal } from "@/components/ui/modal";
```

```tsx
<Modal open={true} onClose={() => close()} title="Welcome" width={50}>
  <Text>This is a modal dialog. Press Esc to close it.</Text>
</Modal>
```

API Reference [#api-reference]

Modal [#modal]

| Prop               | Type                                                                                         | Default                |
| ------------------ | -------------------------------------------------------------------------------------------- | ---------------------- |
| `open`             | `boolean`                                                                                    | `required`             |
| `onClose`          | `() => void`                                                                                 | `required`             |
| `title`            | `string`                                                                                     | -                      |
| `width`            | `number`                                                                                     | `60`                   |
| `children`         | `ReactNode`                                                                                  | -                      |
| `borderStyle`      | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`              |
| `borderColor`      | `string`                                                                                     | -                      |
| `paddingX`         | `number`                                                                                     | `1`                    |
| `paddingY`         | `number`                                                                                     | `0`                    |
| `titleBorderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"`             |
| `closeHint`        | `string \| false`                                                                            | `"Press Esc to close"` |


# Notification Center

Persistent queue-based notification panel with useNotifications hook



<ComponentPreview base="opentui" name="notification-center-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/notification-center
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-notifications.ts" title="hooks/use-notifications.ts" />

      <ComponentSource base="opentui" name="notification-center" title="components/ui/notification-center.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { NotificationCenter } from "@/components/ui/notification-center";
import { useNotifications } from "@/hooks/use-notifications";
```

```tsx
const { notify } = useNotifications();

notify({
  title: "Build complete",
  body: "All checks passed",
  variant: "success",
});

<NotificationCenter maxVisible={5} width={40} />;
```

API Reference [#api-reference]

NotificationCenter [#notificationcenter]

| Prop         | Type     | Default |
| ------------ | -------- | ------- |
| `maxVisible` | `number` | `5`     |
| `width`      | `number` | `40`    |


# Popover

Positioned popover with arbitrary content



<ComponentPreview base="opentui" name="popover-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/popover
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="popover" title="components/ui/popover.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Popover } from "@/components/ui/popover";
```

```tsx
<Popover
  isOpen={true}
  title="Info"
  trigger={<Text bold>[?] Help</Text>}
  onClose={() => close()}
>
  <Text>Press Enter to confirm, Esc to cancel.</Text>
</Popover>
```

API Reference [#api-reference]

Popover [#popover]

| Prop       | Type         | Default    |
| ---------- | ------------ | ---------- |
| `trigger`  | `ReactNode`  | `required` |
| `children` | `ReactNode`  | `required` |
| `isOpen`   | `boolean`    | `false`    |
| `onClose`  | `() => void` | -          |
| `title`    | `string`     | -          |


# Tooltip

Contextual tooltip on focus or hover



<ComponentPreview base="opentui" name="tooltip-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tooltip
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tooltip" title="components/ui/tooltip.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tooltip } from "@/components/ui/tooltip";
```

```tsx
<Tooltip content="Save your current progress" position="top" isVisible={true}>
  <Text bold>[S] Save</Text>
</Tooltip>
```

API Reference [#api-reference]

Tooltip [#tooltip]

| Prop          | Type                                                                                         | Default    |
| ------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `children`    | `ReactNode`                                                                                  | `required` |
| `content`     | `string`                                                                                     | `required` |
| `position`    | `"top" \| "bottom" \| "left" \| "right"`                                                     | `"top"`    |
| `isVisible`   | `boolean`                                                                                    | `false`    |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"` |
| `borderColor` | `string`                                                                                     | -          |
| `paddingX`    | `number`                                                                                     | `1`        |
| `paddingY`    | `number`                                                                                     | `0`        |
| `gap`         | `number`                                                                                     | `1`        |
| `arrowDown`   | `string`                                                                                     | `"↓"`      |
| `arrowUp`     | `string`                                                                                     | `"↑"`      |


# Checkbox Group

Checkbox group with min/max selection



<ComponentPreview base="opentui" name="checkbox-group-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/checkbox-group
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="checkbox-group" title="components/ui/checkbox-group.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { CheckboxGroup } from "@/components/ui/checkbox-group";
```

```tsx
<CheckboxGroup
  label="Select toppings"
  options={[
    { value: "cheese", label: "Extra Cheese" },
    { value: "pepperoni", label: "Pepperoni" },
    { value: "mushrooms", label: "Mushrooms" },
  ]}
  onChange={(values) => {}}
/>
```

API Reference [#api-reference]

CheckboxGroup [#checkboxgroup]

| Prop       | Type                         | Default    |
| ---------- | ---------------------------- | ---------- |
| `label`    | `string`                     | -          |
| `options`  | `CheckboxGroupOption[]`      | `required` |
| `value`    | `string[]`                   | -          |
| `onChange` | `(values: string[]) => void` | -          |
| `min`      | `number`                     | -          |
| `max`      | `number`                     | -          |


# Checkbox

Checkbox with indeterminate state



<ComponentPreview base="opentui" name="checkbox-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/checkbox
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="checkbox" title="components/ui/checkbox.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Checkbox } from "@/components/ui/checkbox";
```

```tsx
<Checkbox checked label="Enable telemetry" onChange={(checked) => {}} />
```

API Reference [#api-reference]

Checkbox [#checkbox]

| Prop                | Type                         | Default |
| ------------------- | ---------------------------- | ------- |
| `checked`           | `boolean`                    | -       |
| `onChange`          | `(checked: boolean) => void` | -       |
| `label`             | `string`                     | -       |
| `indeterminate`     | `boolean`                    | `false` |
| `disabled`          | `boolean`                    | `false` |
| `id`                | `string`                     | -       |
| `checkedIcon`       | `string`                     | `"■"`   |
| `uncheckedIcon`     | `string`                     | `"□"`   |
| `indeterminateIcon` | `string`                     | `"▪"`   |


# Color Picker

Color picker with palette, hex, and RGB input



<ComponentPreview base="opentui" name="color-picker-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/color-picker
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="color-picker" title="components/ui/color-picker.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ColorPicker } from "@/components/ui/color-picker";
```

```tsx
<ColorPicker label="Pick a color" onChange={(color) => {}} />
```

API Reference [#api-reference]

ColorPicker [#colorpicker]

| Prop        | Type                      | Default           |
| ----------- | ------------------------- | ----------------- |
| `value`     | `string`                  | -                 |
| `onChange`  | `(color: string) => void` | -                 |
| `onSubmit`  | `(color: string) => void` | -                 |
| `label`     | `string`                  | -                 |
| `palette`   | `string[]`                | `DEFAULT_PALETTE` |
| `autoFocus` | `boolean`                 | `false`           |
| `id`        | `string`                  | -                 |


# Selection

Components for selecting values, options, and choices in the terminal.



<ComponentsList base="opentui" category="selection" />


# Multi Select

Multi-select list with checkboxes and select-all



<ComponentPreview base="opentui" name="multi-select-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/multi-select
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="multi-select" title="components/ui/multi-select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { MultiSelect } from "@/components/ui/multi-select";
```

```tsx
<MultiSelect
  options={[
    { value: "react", label: "React" },
    { value: "vue", label: "Vue" },
    { value: "svelte", label: "Svelte" },
  ]}
  onChange={(values) => {}}
/>
```

API Reference [#api-reference]

MultiSelect [#multiselect]

| Prop        | Type                     | Default    |
| ----------- | ------------------------ | ---------- |
| `options`   | `MultiSelectOption<T>[]` | `required` |
| `value`     | `T[]`                    | -          |
| `onChange`  | `(values: T[]) => void`  | -          |
| `onSubmit`  | `(values: T[]) => void`  | -          |
| `cursor`    | `string`                 | `"›"`      |
| `checkmark` | `string`                 | `"◉"`      |
| `height`    | `number`                 | -          |


# Radio Group

Mutually exclusive radio button group



<ComponentPreview base="opentui" name="radio-group-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/radio-group
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="radio-group" title="components/ui/radio-group.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { RadioGroup } from "@/components/ui/radio-group";
```

```tsx
<RadioGroup
  options={[
    { value: "sm", label: "Small" },
    { value: "md", label: "Medium" },
    { value: "lg", label: "Large" },
  ]}
  onChange={(value) => {}}
/>
```

API Reference [#api-reference]

RadioGroup [#radiogroup]

| Prop       | Type                 | Default    |
| ---------- | -------------------- | ---------- |
| `options`  | `RadioOption<T>[]`   | `required` |
| `value`    | `T`                  | -          |
| `onChange` | `(value: T) => void` | -          |
| `name`     | `string`             | -          |
| `cursor`   | `string`             | `"›"`      |


# Select

Single-select dropdown with arrow-key navigation



<ComponentPreview base="opentui" name="select-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/select
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="select" title="components/ui/select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Select } from "@/components/ui/select";
```

```tsx
<Select
  label="Choose a framework"
  options={[
    { value: "next", label: "Next.js" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" },
  ]}
  onChange={(value) => {}}
/>
```

API Reference [#api-reference]

Select [#select]

| Prop          | Type                 | Default    |
| ------------- | -------------------- | ---------- |
| `options`     | `SelectOption<T>[]`  | `required` |
| `value`       | `T`                  | -          |
| `onChange`    | `(value: T) => void` | -          |
| `onSubmit`    | `(value: T) => void` | -          |
| `label`       | `string`             | -          |
| `cursor`      | `string`             | `"›"`      |
| `cursorColor` | `string`             | -          |


# Tag Input

Add and remove tags inline



<ComponentPreview base="opentui" name="tag-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tag-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tag-input" title="components/ui/tag-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TagInput } from "@/components/ui/tag-input";
```

```tsx
<TagInput placeholder="Add a tag…" onChange={(tags) => {}} />
```

API Reference [#api-reference]

TagInput [#taginput]

| Prop          | Type                       | Default                   |
| ------------- | -------------------------- | ------------------------- |
| `value`       | `string[]`                 | -                         |
| `onChange`    | `(tags: string[]) => void` | -                         |
| `placeholder` | `string`                   | `"Type and press Enter…"` |
| `maxTags`     | `number`                   | -                         |
| `delimiter`   | `string`                   | -                         |


# Tree Select

Hierarchical tree selection



<ComponentPreview base="opentui" name="tree-select-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tree-select
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tree-select" title="components/ui/tree-select.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { TreeSelect } from "@/components/ui/tree-select";
```

```tsx
<TreeSelect
  label="Select a file"
  nodes={[
    {
      value: "src",
      label: "src",
      children: [
        { value: "index.ts", label: "index.ts" },
        { value: "utils.ts", label: "utils.ts" },
      ],
    },
    { value: "README.md", label: "README.md" },
  ]}
  onChange={(value) => {}}
/>
```

API Reference [#api-reference]

TreeSelect [#treeselect]

| Prop                | Type                  | Default    |
| ------------------- | --------------------- | ---------- |
| `nodes`             | `TreeSelectNode<T>[]` | `required` |
| `value`             | `T`                   | -          |
| `onChange`          | `(value: T) => void`  | -          |
| `onSubmit`          | `(value: T) => void`  | -          |
| `label`             | `string`              | -          |
| `expandedByDefault` | `boolean`             | `false`    |


# Badge

Semantic status indicator badge (success/error/warning/info)



<ComponentPreview base="opentui" name="badge-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/badge
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="badge" title="components/ui/badge.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Badge } from "@/components/ui/badge";
```

```tsx
<Badge variant="success">Active</Badge>
```

Examples [#examples]

Basic [#basic]

A basic default badge.

<ComponentPreview base="opentui" name="badge-basic" />

Bold Without Border [#bold-without-border]

Use `bold` and `bordered={false}` for an inline label style.

<ComponentPreview base="opentui" name="badge-bold" />

Custom Border Style [#custom-border-style]

Customize the border style and padding.

<ComponentPreview base="opentui" name="badge-custom-border" />

API Reference [#api-reference]

Badge [#badge]

| Prop          | Type                                                                                         | Default     |
| ------------- | -------------------------------------------------------------------------------------------- | ----------- |
| `children`    | `string`                                                                                     | `required`  |
| `variant`     | `"default" \| "success" \| "warning" \| "error" \| "info" \| "secondary"`                    | `"default"` |
| `color`       | `string`                                                                                     | -           |
| `bold`        | `boolean`                                                                                    | `false`     |
| `bordered`    | `boolean`                                                                                    | `true`      |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`   |
| `paddingX`    | `number`                                                                                     | `1`         |


# Big Text

Figlet-style large ASCII art text



<ComponentPreview base="opentui" name="big-text-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/big-text
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="big-text" title="components/ui/big-text.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { BigText } from "@/components/ui/big-text";
```

```tsx
<BigText>HELLO</BigText>
```

Examples [#examples]

Simple [#simple]

<ComponentPreview base="opentui" name="big-text-simple" />

Shade [#shade]

<ComponentPreview base="opentui" name="big-text-shade" />

Slim [#slim]

<ComponentPreview base="opentui" name="big-text-slim" />

API Reference [#api-reference]

BigText [#bigtext]

| Prop       | Type                                       | Default    |
| ---------- | ------------------------------------------ | ---------- |
| `children` | `string`                                   | `required` |
| `color`    | `string`                                   | -          |
| `font`     | `"block" \| "simple" \| "shade" \| "slim"` | `"block"`  |


# Code

Syntax-highlighted code block (50+ languages)



<ComponentPreview base="opentui" name="code-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/code
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="code" title="components/ui/code.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Code } from "@/components/ui/code";
```

```tsx
<Code language="typescript">
  {`const greeting = "Hello, world!";\nconsole.log(greeting);`}
</Code>
```

Examples [#examples]

Multiline [#multiline]

<ComponentPreview base="opentui" name="code-multiline" />

API Reference [#api-reference]

Code [#code]

| Prop                  | Type                                                                                         | Default    |
| --------------------- | -------------------------------------------------------------------------------------------- | ---------- |
| `children`            | `string`                                                                                     | `required` |
| `language`            | `string`                                                                                     | -          |
| `inline`              | `boolean`                                                                                    | `false`    |
| `borderStyle`         | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"single"` |
| `showLineNumbers`     | `boolean`                                                                                    | `true`     |
| `lineNumberSeparator` | `string`                                                                                     | `"│ "`     |
| `keywordColor`        | `string`                                                                                     | -          |
| `stringColor`         | `string`                                                                                     | -          |
| `numberColor`         | `string`                                                                                     | -          |
| `commentColor`        | `string`                                                                                     | -          |
| `operatorColor`       | `string`                                                                                     | -          |
| `plainColor`          | `string`                                                                                     | -          |


# Digits

Box-drawing character numerals



<ComponentPreview base="opentui" name="digits-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/digits
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="digits" title="components/ui/digits.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Digits } from "@/components/ui/digits";
```

```tsx
<Digits value="12:30" />
```

API Reference [#api-reference]

Digits [#digits]

| Prop    | Type                   | Default    |
| ------- | ---------------------- | ---------- |
| `value` | `string \| number`     | `required` |
| `color` | `string`               | -          |
| `size`  | `"sm" \| "md" \| "lg"` | `"md"`     |


# Gradient

Color gradient text



<ComponentPreview base="opentui" name="gradient-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/gradient
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="gradient" title="components/ui/gradient.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Gradient } from "@/components/ui/gradient";
```

```tsx
<Gradient colors={["#ff6b6b", "#4ecdc4"]}>Hello Gradient</Gradient>
```

Examples [#examples]

Cristal [#cristal]

<ComponentPreview base="opentui" name="gradient-cristal" />

Teen [#teen]

<ComponentPreview base="opentui" name="gradient-teen" />

Mind [#mind]

<ComponentPreview base="opentui" name="gradient-mind" />

Morning [#morning]

<ComponentPreview base="opentui" name="gradient-morning" />

Vice [#vice]

<ComponentPreview base="opentui" name="gradient-vice" />

Passion [#passion]

<ComponentPreview base="opentui" name="gradient-passion" />

Fruit [#fruit]

<ComponentPreview base="opentui" name="gradient-fruit" />

Instagram [#instagram]

<ComponentPreview base="opentui" name="gradient-instagram" />

Atlas [#atlas]

<ComponentPreview base="opentui" name="gradient-atlas" />

Retro [#retro]

<ComponentPreview base="opentui" name="gradient-retro" />

Summer [#summer]

<ComponentPreview base="opentui" name="gradient-summer" />

Pastel [#pastel]

<ComponentPreview base="opentui" name="gradient-pastel" />

Rainbow [#rainbow]

<ComponentPreview base="opentui" name="gradient-rainbow" />

API Reference [#api-reference]

Gradient [#gradient]

Either pass `colors`, or pass `name` (not both required; `name` selects a preset when `colors` is omitted).

| Prop       | Type                                                                                                                                                     | Default    |
| ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `children` | `string`                                                                                                                                                 | `required` |
| `colors`   | `string[]`                                                                                                                                               | -          |
| `name`     | `"cristal" \| "teen" \| "mind" \| "morning" \| "vice" \| "passion" \| "fruit" \| "instagram" \| "atlas" \| "retro" \| "summer" \| "pastel" \| "rainbow"` | -          |
| `bold`     | `boolean`                                                                                                                                                | `false`    |


# Heading

h1–h4 styled headings with optional figlet ASCII art



<ComponentPreview base="opentui" name="heading-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/heading
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="heading" title="components/ui/heading.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Heading } from "@/components/ui/heading";
```

```tsx
<Heading level={1}>Getting Started</Heading>
```

API Reference [#api-reference]

Heading [#heading]

| Prop        | Type               | Default    |
| ----------- | ------------------ | ---------- |
| `level`     | `1 \| 2 \| 3 \| 4` | `1`        |
| `children`  | `ReactNode`        | `required` |
| `color`     | `string`           | -          |
| `prefix1`   | `string`           | `"██ "`    |
| `prefix2`   | `string`           | `"▌ "`     |
| `prefix3`   | `string`           | `"› "`     |
| `uppercase` | `boolean`          | `true`     |


# Typography

Components for rendering and styling text in your terminal UI.



<ComponentsList base="opentui" category="typography" />


# Link

OSC 8 clickable hyperlink



<ComponentPreview base="opentui" name="link-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/link
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="link" title="components/ui/link.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Link } from "@/components/ui/link";
```

```tsx
<Link href="https://github.com">GitHub</Link>
```

Examples [#examples]

Show URL and terminals without OSC 8 [#show-url-and-terminals-without-osc-8]

`showHref` appends the URL in dim text. When the terminal does not support OSC 8 hyperlinks, the same fallback is used unless you set `fallback={false}` or pass a custom `fallback` function.

<ComponentPreview base="opentui" name="link-show-href" />

API Reference [#api-reference]

Link [#link]

| Prop       | Type                                                 | Default    |
| ---------- | ---------------------------------------------------- | ---------- |
| `children` | `ReactNode`                                          | `required` |
| `href`     | `string`                                             | `required` |
| `color`    | `string`                                             | -          |
| `showHref` | `boolean`                                            | `false`    |
| `fallback` | `boolean \| ((text: string, url: string) => string)` | `true`     |


# Markdown

Full markdown renderer for terminal



<ComponentPreview base="opentui" name="markdown-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/markdown
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="markdown" title="components/ui/markdown.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Markdown } from "@/components/ui/markdown";
```

```tsx
<Markdown>{`# Welcome\n\nThis is **bold** and *italic* text.`}</Markdown>
```

API Reference [#api-reference]

Markdown [#markdown]

| Prop       | Type     | Default    |
| ---------- | -------- | ---------- |
| `children` | `string` | `required` |
| `width`    | `number` | -          |


# Tag

Removable chip/tag



<ComponentPreview base="opentui" name="tag-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/tag
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="tag" title="components/ui/tag.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Tag } from "@/components/ui/tag";
```

```tsx
<Tag>typescript</Tag>
```

Examples [#examples]

Outline [#outline]

A variant with a muted border style.

<ComponentPreview base="opentui" name="tag-outline" />

API Reference [#api-reference]

Tag [#tag]

| Prop       | Type                     | Default     |
| ---------- | ------------------------ | ----------- |
| `children` | `ReactNode`              | `required`  |
| `onRemove` | `() => void`             | -           |
| `color`    | `string`                 | -           |
| `variant`  | `"default" \| "outline"` | `"default"` |


# Clipboard

Copy-to-clipboard button with success feedback



<ComponentPreview base="opentui" name="clipboard-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/clipboard
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource src="registry/bases/ink/hooks/use-clipboard.ts" title="hooks/use-clipboard.ts" />

      <ComponentSource base="opentui" name="clipboard" title="components/ui/clipboard.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Clipboard } from "@/components/ui/clipboard";
```

```tsx
<Clipboard value="npm install termcn" label="Install command" />
```

API Reference [#api-reference]

Clipboard [#clipboard]

| Prop             | Type     | Default     |
| ---------------- | -------- | ----------- |
| `value`          | `string` | `required`  |
| `label`          | `string` | -           |
| `successMessage` | `string` | `"Copied!"` |
| `timeout`        | `number` | `2000`      |


# Clock

Real-time clock display with 12h/24h and date



<ComponentPreview base="opentui" name="clock-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/clock
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="clock" title="components/ui/clock.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Clock } from "@/components/ui/clock";
```

```tsx
<Clock format="12h" showSeconds showDate timezone="America/New_York" />
```

API Reference [#api-reference]

Clock [#clock]

| Prop          | Type             | Default |
| ------------- | ---------------- | ------- |
| `format`      | `"12h" \| "24h"` | `"24h"` |
| `showSeconds` | `boolean`        | `true`  |
| `showDate`    | `boolean`        | `false` |
| `timezone`    | `string`         | -       |
| `color`       | `string`         | -       |
| `size`        | `"sm" \| "lg"`   | `"sm"`  |


# Embedded Terminal

Embedded PTY terminal panel (requires node-pty peer)



<ComponentPreview base="opentui" name="embedded-terminal-demo" />

<Callout type="info">
  Embedded terminal requires Node.js and may not render in the browser preview.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/embedded-terminal
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="embedded-terminal" title="components/ui/embedded-terminal.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { EmbeddedTerminal } from "@/components/ui/embedded-terminal";
```

```tsx
<EmbeddedTerminal
  command="bash"
  args={["-c", "echo Hello world"]}
  width={80}
  height={24}
  onExit={(code) => console.log(`Exited with ${code}`)}
/>
```

API Reference [#api-reference]

EmbeddedTerminal [#embeddedterminal]

| Prop      | Type                     | Default    |
| --------- | ------------------------ | ---------- |
| `command` | `string`                 | `required` |
| `args`    | `string[]`               | `[]`       |
| `cwd`     | `string`                 | -          |
| `width`   | `number`                 | `80`       |
| `height`  | `number`                 | `24`       |
| `onExit`  | `(code: number) => void` | -          |


# Error Boundary

React error boundary with graceful terminal display



<ComponentPreview base="opentui" name="error-boundary-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/error-boundary
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="error-boundary" title="components/ui/error-boundary.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { ErrorBoundary } from "@/components/ui/error-boundary";
```

```tsx
<ErrorBoundary title="Application Error">
  <YourAppContent />
</ErrorBoundary>
```

API Reference [#api-reference]

ErrorBoundary [#errorboundary]

| Prop       | Type                                                       | Default    |
| ---------- | ---------------------------------------------------------- | ---------- |
| `children` | `ReactNode`                                                | `required` |
| `fallback` | `ReactNode`                                                | -          |
| `onError`  | `(error: Error, info: { componentStack: string }) => void` | -          |
| `title`    | `string`                                                   | `"Error"`  |


# Help

Auto-generated help panel from a keymap



<ComponentPreview base="opentui" name="help-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/help
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="help" title="components/ui/help.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Help } from "@/components/ui/help";
```

```tsx
<Help
  title="Keyboard Shortcuts"
  keymap={{
    q: "Quit",
    h: "Help",
    j: "Move down",
    k: "Move up",
  }}
/>
```

API Reference [#api-reference]

Help [#help]

| Prop      | Type                     | Default    |
| --------- | ------------------------ | ---------- |
| `keymap`  | `Record<string, string>` | `required` |
| `title`   | `string`                 | -          |
| `compact` | `boolean`                | `false`    |


# Image

Image renderer with iTerm2/Kitty protocol and ASCII fallback



<ComponentPreview base="opentui" name="image-demo" />

<Callout type="info">
  Image rendering uses terminal-specific protocols (iTerm2, Kitty) and falls
  back to ASCII art. Results vary by terminal emulator.
</Callout>

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/image
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="image" title="components/ui/image.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Image } from "@/components/ui/image";
```

```tsx
<Image src="./screenshot.png" width={40} alt="Application screenshot" />
```

API Reference [#api-reference]

Image [#image]

| Prop       | Type                                       | Default    |
| ---------- | ------------------------------------------ | ---------- |
| `src`      | `string`                                   | `required` |
| `width`    | `number`                                   | `20`       |
| `height`   | `number`                                   | -          |
| `protocol` | `"auto" \| "iterm2" \| "kitty" \| "ascii"` | `"auto"`   |
| `alt`      | `string`                                   | -          |


# Utility

Utility components for common terminal patterns like clipboard, timers, and panels.



<ComponentsList base="opentui" category="utility" />


# Keyboard Shortcuts

Formatted keyboard shortcut reference table



<ComponentPreview base="opentui" name="keyboard-shortcuts-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/keyboard-shortcuts
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="keyboard-shortcuts" title="components/ui/keyboard-shortcuts.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { KeyboardShortcuts } from "@/components/ui/keyboard-shortcuts";
```

```tsx
<KeyboardShortcuts
  title="Editor Shortcuts"
  shortcuts={[
    { key: "Ctrl+S", description: "Save file" },
    { key: "Ctrl+Z", description: "Undo" },
    { key: "Ctrl+F", description: "Find" },
  ]}
/>
```

API Reference [#api-reference]

KeyboardShortcuts [#keyboardshortcuts]

| Prop        | Type         | Default    |
| ----------- | ------------ | ---------- |
| `shortcuts` | `Shortcut[]` | `required` |
| `columns`   | `number`     | `1`        |
| `title`     | `string`     | -          |

Shortcut [#shortcut]

| Prop          | Type     | Default    |
| ------------- | -------- | ---------- |
| `key`         | `string` | `required` |
| `description` | `string` | `required` |
| `category`    | `string` | -          |


# Log

Scrolling log viewer with severity levels and filtering



<ComponentPreview base="opentui" name="log-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/log
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="log" title="components/ui/log.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Log } from "@/components/ui/log";
```

```tsx
<Log
  entries={[
    { level: "info", message: "Server started on port 3000" },
    { level: "warn", message: "Deprecated API call detected" },
    { level: "error", message: "Failed to connect to database" },
  ]}
  height={10}
  showTimestamp
  follow
/>
```

API Reference [#api-reference]

Log [#log]

| Prop            | Type         | Default    |
| --------------- | ------------ | ---------- |
| `entries`       | `LogEntry[]` | `required` |
| `height`        | `number`     | `10`       |
| `showTimestamp` | `boolean`    | `true`     |
| `filter`        | `string`     | -          |
| `follow`        | `boolean`    | `false`    |

LogEntry [#logentry]

| Prop        | Type                                     | Default    |
| ----------- | ---------------------------------------- | ---------- |
| `level`     | `"debug" \| "info" \| "warn" \| "error"` | `required` |
| `message`   | `string`                                 | `required` |
| `timestamp` | `Date`                                   | -          |


# Panel

Titled bordered panel



<ComponentPreview base="opentui" name="panel-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/panel
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="panel" title="components/ui/panel.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Panel } from "@/components/ui/panel";
```

```tsx
<Panel title="System Status" borderStyle="round" width={40}>
  <Text>All services operational</Text>
</Panel>
```

API Reference [#api-reference]

Panel [#panel]

| Prop          | Type                                                                                         | Default |
| ------------- | -------------------------------------------------------------------------------------------- | ------- |
| `title`       | `string`                                                                                     | -       |
| `titleColor`  | `string`                                                                                     | -       |
| `borderColor` | `string`                                                                                     | -       |
| `borderStyle` | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | -       |
| `bordered`    | `boolean`                                                                                    | `true`  |
| `width`       | `number`                                                                                     | -       |
| `height`      | `number`                                                                                     | -       |
| `paddingX`    | `number`                                                                                     | `1`     |
| `paddingY`    | `number`                                                                                     | `0`     |
| `children`    | `ReactNode`                                                                                  | -       |


# QR Code

Unicode block QR code generator



<ComponentPreview base="opentui" name="qr-code-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/qr-code
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="qr-code" title="components/ui/qr-code.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { QRCode } from "@/components/ui/qr-code";
```

```tsx
<QRCode value="https://termcn.dev" size="md" label="Scan to visit" />
```

API Reference [#api-reference]

QRCode [#qrcode]

| Prop    | Type                   | Default    |
| ------- | ---------------------- | ---------- |
| `value` | `string`               | `required` |
| `size`  | `"sm" \| "md" \| "lg"` | `"md"`     |
| `color` | `string`               | -          |
| `label` | `string`               | -          |


# Stopwatch

Count-up stopwatch with laps and reset



<ComponentPreview base="opentui" name="stopwatch-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/stopwatch
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="stopwatch" title="components/ui/stopwatch.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Stopwatch } from "@/components/ui/stopwatch";
```

```tsx
<Stopwatch autoStart showLaps color="green" />
```

API Reference [#api-reference]

Stopwatch [#stopwatch]

| Prop        | Type      | Default |
| ----------- | --------- | ------- |
| `autoStart` | `boolean` | `false` |
| `color`     | `string`  | -       |
| `showLaps`  | `boolean` | `true`  |


# Timer

Countdown timer with pause/resume and auto-start



<ComponentPreview base="opentui" name="timer-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/timer
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="timer" title="components/ui/timer.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Timer } from "@/components/ui/timer";
```

```tsx
<Timer duration={300} format="ms" label="Pomodoro" autoStart />
```

API Reference [#api-reference]

Timer [#timer]

| Prop         | Type                   | Default    |
| ------------ | ---------------------- | ---------- |
| `duration`   | `number`               | `required` |
| `onComplete` | `() => void`           | -          |
| `autoStart`  | `boolean`              | `false`    |
| `format`     | `"hms" \| "ms" \| "s"` | `"hms"`    |
| `color`      | `string`               | -          |
| `label`      | `string`               | -          |


# Toggle

Toggle/switch component with on/off labels



<ComponentPreview base="opentui" name="toggle-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui/toggle
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install @opentui/react
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="registry/bases/opentui/ui/types.ts" title="components/ui/types.ts" />

      <ComponentSource src="registry/bases/opentui/themes/default.ts" title="lib/terminal-themes/default.ts" />

      <ComponentSource src="registry/bases/opentui/hooks/use-theme.ts" title="hooks/use-theme.ts" />

      <ComponentSource base="opentui" name="toggle" title="components/ui/toggle.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { Toggle } from "@/components/ui/toggle";
```

```tsx
<Toggle checked={enabled} onChange={setEnabled} label="Dark mode" />
```

API Reference [#api-reference]

Toggle [#toggle]

| Prop            | Type                                                                                         | Default   |
| --------------- | -------------------------------------------------------------------------------------------- | --------- |
| `checked`       | `boolean`                                                                                    | -         |
| `onChange`      | `(checked: boolean) => void`                                                                 | -         |
| `label`         | `string`                                                                                     | -         |
| `onLabel`       | `string`                                                                                     | `"ON"`    |
| `offLabel`      | `string`                                                                                     | `"OFF"`   |
| `id`            | `string`                                                                                     | -         |
| `disabled`      | `boolean`                                                                                    | `false`   |
| `checkedIcon`   | `string`                                                                                     | `"●"`     |
| `uncheckedIcon` | `string`                                                                                     | `"○"`     |
| `borderStyle`   | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"` |
| `paddingX`      | `number`                                                                                     | `1`       |