Tree

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/tree
Copy

Usage

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

Copy<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

TreeNode

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

• Keyboard: Arrow keys move the current item or viewport; Home / End move to the boundaries; PageUp / PageDown move by a page; Enter / Space select or expand when supported; Tab / Shift+Tab leave the composite.
• Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
• Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.