Data Display

Tree View

Data-driven, accessible hierarchy with keyboard navigation.

Import

tsx

import { TreeView } from "@cooud-ui/ui";

bash

npx cooud-ui add tree-view

Examples

File tree

A data-driven hierarchy rendered from a `data` array of `TreeNode`s. Branches expand and collapse; selection and the expanded set are both controllable. Full keyboard support (arrows to move, Right/Left to open/close, Enter/Space to select).

src

components

button.tsx

card.tsx

lib

index.ts

package.json

README.md

tsx

const data: TreeNode[] = [
  {
    id: "src",
    label: "src",
    icon: <Folder aria-hidden="true" />,
    children: [
      {
        id: "components",
        label: "components",
        icon: <Folder aria-hidden="true" />,
        children: [
          { id: "button.tsx", label: "button.tsx", icon: <FileText aria-hidden="true" /> },
          { id: "card.tsx", label: "card.tsx", icon: <FileText aria-hidden="true" /> },
        ],
      },
      { id: "index.ts", label: "index.ts", icon: <FileText aria-hidden="true" /> },
    ],
  },
  { id: "package.json", label: "package.json", icon: <FileText aria-hidden="true" /> },
];

return (
  <TreeView
    data={data}
    defaultExpandedIds={["src", "components"]}
    defaultValue="button.tsx"
    aria-label="Project files"
    className="max-w-xs rounded-lg border border-border p-1.5"
  />
);

API Reference

Generated from the component's exported types.

TreeViewProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">

Prop	Type	Default	Description
`data`*	`TreeNode[]`	—	The hierarchy to render.
`value`	`string`	—	Controlled selected node id.
`defaultValue`	`string`	—	Initial selected node id for the uncontrolled case.
`onValueChange`	`(id: string) => void`	—	Called when the selection changes (controlled or not).
`expandedIds`	`string[]`	—	Controlled set of expanded branch ids.
`defaultExpandedIds`	`string[]`	—	Initial expanded branch ids for the uncontrolled case.
`onExpandedChange`	`(ids: string[]) => void`	—	Called whenever the expanded set changes (controlled or not).
`aria-label`	`string`	—	Accessible label for the tree landmark.