A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink. Works with shadcn/ui.

How do I publish components with termcn?

Add components under registry/new-york/, list them in registry.json, run pnpm registry:build, then deploy. Users install with npx shadcn@latest add pointing at your published JSON URL.

Is termcn open source?

Yes. The project is intended to be forked or cloned; source is available on GitHub under an open license.

Overview

Introduction
Installation
Components
Templates
Theming
MCP
Registry
llms.txt

Themes

Default
Dracula
Nord
Catppuccin
Monokai
Solarized
Tokyo Night
One Dark
High Contrast

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

Chat Message
Chat Thread
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

Columns

Multi-column layout with configurable widths

Terminal

Installation


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

Usage

import { Columns } from "@/components/ui/columns";

<Columns gap={2} align="center">
  <Text>Left</Text>
  <Text>Right</Text>
</Columns>

API Reference

Columns

Prop	Type	Default
`children`	`ReactNode`	required
`gap`	`number`	`0`
`align`	`"top" \| "center" \| "bottom"`	`"top"`

Center Divider

On This Page

Installation Usage API Reference Columns