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

Themes

Layout

Typography

Input

Selection

Data

Feedback

Navigation

Overlays

Forms

Utility

Charts

Templates

Data Grid

Advanced data grid with sorting, filtering, pagination, and cell editing

Terminal

Installation


pnpm dlx shadcn@latest add https://termcn.dev/r/data-grid.json

Usage

import { DataGrid } from "@/components/ui/data-grid";

<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

DataGrid

Prop	Type	Default
`data`	`T[]`	`required`
`columns`	`DataGridColumn<T>[]`	`required`
`pageSize`	`number`	`10`
`onRowSelect`	`(row: T) => void`	`undefined`
`onCellEdit`	`(row: T, key: string, value: string) => void`	`undefined`
`borderColor`	`string`	`undefined`
`borderStyle`	`"single" \| "double" \| "round" \| "bold"`	`"single"`
`showRowNumbers`	`boolean`	`false`
`filterPlaceholder`	`string`	`undefined`

DataGridColumn

Prop	Type	Default
`key`	`keyof T & string`	`required`
`header`	`string`	`required`
`width`	`number`	`undefined`
`align`	`"left" \| "right" \| "center"`	`"left"`
`render`	`(value: unknown, row: T) => string`	`undefined`
`filterable`	`boolean`	`undefined`
`sortable`	`boolean`	`undefined`

Card Definition

On This Page

Installation Usage API Reference DataGrid DataGridColumn