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 or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

Tree

Expandable/collapsible tree view

Terminal

tree-demo

No opentui live preview is registered for this example yet.

Installation


$ pnpm dlx shadcn@latest add @termcn/tree

Usage

import { Tree } from "@/components/ui/tree";

<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

Tree

Prop	Type	Default
`nodes`	`TreeNode[]`	`required`
`onSelect`	`(node: TreeNode) => void`	-
`defaultExpanded`	`string[]`	`[]`
`expandedIcon`	`string`	`"▼"`
`collapsedIcon`	`string`	`"▶"`
`leafIcon`	`string`	`"•"`

TreeNode

Prop	Type	Default
`key`	`string`	`required`
`label`	`string`	`required`
`children`	`TreeNode[]`	-
`icon`	`string`	-

Table Virtual List

On This Page

Installation Usage API Reference Tree TreeNode

Edit this page Follow @shadcnlabs Join community