A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink and OpenTUI. 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.

Directory Tree

Filesystem browser with expand/collapse

Ink OpenTUI

Terminal

                                                                               █
 directory-tree-demo                                                           █
 Loading preview...                                                            █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █
                                                                               █

Installation


$ pnpm dlx shadcn@latest add @termcn/opentui/directory-tree

Usage

import { DirectoryTree } from "@/components/ui/directory-tree";

<DirectoryTree
  rootPath="/home/user/project"
  maxDepth={3}
  label="Project Files"
/>

API Reference

DirectoryTree

Prop	Type	Default
`rootPath`	`string`	`process.cwd()`
`onSelect`	`(path: string) => void`	-
`maxDepth`	`number`	`2`
`showHidden`	`boolean`	`false`
`label`	`string`	-

Diff View Git Status

On This Page

Installation Usage API Reference DirectoryTree

Edit this page Follow @shadcnlabs Join community