Copy-Paste Terminal UI Components for React

termcn is a React component registry for terminal applications, built on Ink and OpenTUI and installed through the shadcn CLI.

It includes 80+ terminal-style UI components, including layout, forms, data display, charts, and AI chat interfaces for CLI tools, dev servers, and agent-style terminal apps.

Official Website

Browse All Components

Features

Installs through the shadcn CLI with a single add command per component.
100+ components across layout, typography, input, selection, data, feedback, navigation, overlays, forms, and utility categories.
Includes chart components for terminals, including bar charts, line charts, gauges, and heat maps.
Also comes with an AI-focused set: chat threads, tool call and tool approval displays, streaming text, and thinking blocks.
Bundles 40+ terminal color themes through a ThemeProvider, from Dracula and Nord to Catppuccin and Tokyo Night.
Supports custom themes with a createTheme helper for project-specific palettes.
Works with both Ink and OpenTUI through separate ink/ and opentui/ registry namespaces.
Full TypeScript support across the component set.

How to Use termcn

Choose Ink or OpenTUI

Start inside an existing Ink or OpenTUI project. Use the registry namespace that matches the renderer:

@termcn/ink/... for Ink.
@termcn/opentui/... for OpenTUI.

Register the termcn Namespace

Add the registry alias to components.json:

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

Install a Component

Add the Ink spinner:

pnpm dlx shadcn@latest add @termcn/ink/spinner

Add the OpenTUI version:

pnpm dlx shadcn@latest add @termcn/opentui/spinner

A direct registry URL also works when the project does not use a registry alias:

pnpm dlx shadcn@latest add https://termcn.dev/r/ink/spinner.json

Basic Usage

import { Text } from "ink";
import { Spinner } from "@/components/ui/spinner";
export function App() {
  return (
    <>
      <Text>Loading project configuration...</Text>
      <Spinner type="dots" label="Checking dependencies" />
    </>
  );
}

Available UI Components

Category	Components
Layout	Aspect Ratio, Box, Center, Columns, Divider, Grid, Scroll View, Spacer, Stack
Typography	Badge, Big Text, Code, Digits, Gradient, Heading, Link, Markdown, Tag
Input	Email Input, Masked Input, Number Input, Password Input, Path Input, Search Input, Text Area, Text Input
Selection	Checkbox, Checkbox Group, Color Picker, Multi Select, Radio Group, Select, Tag Input, Tree Select
Data	Card, Data Grid, Definition, Diff View, Directory Tree, Git Status, JSON, Key Value, List, Table, Tree, Virtual List
Feedback	Alert, Banner, Multi Progress, Progress Bar, Progress Circle, Skeleton, Spinner, Status Message, Toast
Navigation	Breadcrumb, Command Palette, Menu, Pagination, Sidebar, Tabbed Content, Tabs
Overlays	Dialog, Drawer, Modal, Notification Center, Popover, Tooltip
Forms	Confirm, Date Picker, File Picker, Form, Form Field, Time Picker, Wizard
Utility	Clipboard, Clock, Embedded Terminal, Error Boundary, Help, Image, Keyboard Shortcuts, Log, Panel, QR Code, Stopwatch, Timer, Toggle
Charts	Bar Chart, Gauge, Heat Map, Line Chart, Pie Chart, Sparkline
AI	Chat Message, Chat Thread, Conversation History, Error Retry, File Change, Model Selector, Streaming Text, Thinking Block, Token Usage, Tool Approval, Tool Call
Templates	App Shell, Bullet List, Help Screen, Info Box, Login Flow, Setup Flow, Splash Screen, Usage Monitor, Welcome Screen

Terminal Themes

Install the matching theme provider before using registry components that call useTheme.

For Ink:

pnpm dlx shadcn@latest add @termcn/ink/theme-provider
pnpm dlx shadcn@latest add @termcn/ink/theme-dracula

For OpenTUI:

pnpm dlx shadcn@latest add @termcn/opentui/theme-provider
pnpm dlx shadcn@latest add @termcn/opentui/theme-dracula

Wrap the terminal application with the installed provider:

import { ThemeProvider } from "@/components/ui/theme-provider";
import { draculaTheme } from "@/lib/terminal-themes/dracula";
import { App } from "./app";
export function Root() {
  return (
    <ThemeProvider theme={draculaTheme}>
      <App />
    </ThemeProvider>
  );
}

Create a Custom Theme

import { createTheme } from "@/components/ui/theme-provider";
export const oceanTheme = createTheme({
  name: "ocean",
  colors: {
    primary: "#0ea5e9",
    accent: "#22d3ee",
    background: "#0f172a",
    foreground: "#e2e8f0",
  },
});

Local Files and Customization

The registry places component source inside the project. Edit the installed JSX, TypeScript types, keyboard behavior, terminal characters, labels, dimensions, and theme tokens directly.

Preview a registry operation before writing files:

pnpm dlx shadcn@latest add @termcn/ink/table --dry-run

MCP Support

pnpm dlx shadcn@latest mcp init

Select the editor or MCP client during setup, then enable the generated server configuration. The editor can search registry items and work with termcn patterns for terminal dashboards, forms, navigation, and AI interactions.

Alternatives and Related Resources

FAQs

Q: Do I need shadcn/ui installed to use termcn?
A: No. termcn uses the shadcn CLI as a distribution mechanism for terminal components, not the shadcn/ui web component library.

Q: Why does my component render without theme colors?
A: Components that call useTheme need a ThemeProvider ancestor with a theme installed. Add the theme-provider registry item and a theme package such as theme-dracula before wrapping your app.

Q: Does termcn work inside a Next.js page?
A: termcn is designed for Ink and OpenTUI terminal renderers. Use a browser-focused React or shadcn/ui library for interfaces rendered through React DOM.