Display

Tree View

Data-driven, accessible hierarchy with keyboard navigation.

Import

tsx

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

bash

npx cronus-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"
  />
);

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TreeViewDefault layout:inline style:tree-view {
  aria-label:"Files"
  label "Files"
  text "src"
  text "README.md"
}

page "/audit/tree-view/default" type:custom {
  use TreeViewDefault
}

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.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.