A data-driven hierarchical tree view. Pass a data array of TreeDataItem nodes — any node with children is a folder that expands and collapses, anything else is a leaf. The tree manages its own expand state (auto-expanding the ancestors of initialSelectedItemId, or everything when expandAll is set) and its own selection, reporting changes through onSelectChange. Each node can carry its own icons, an actions slot, and a disabled flag, or you can take over the whole row with renderItem.

Installation

{
  "registries": {
    "@ikui": "https://ik-ui.pages.dev/r/{name}.json"
  }
}

pnpm dlx shadcn@latest add @ikui/tree

Usage

import { Tree, type TreeDataItem } from "@/components/tree";

const data: TreeDataItem[] = [
  {
    id: "app",
    name: "app",
    children: [
      { id: "page", name: "page.tsx" },
      { id: "layout", name: "layout.tsx" },
    ],
  },
  { id: "readme", name: "README.md" },
];

<Tree
  data={data}
  initialSelectedItemId="page"
  onSelectChange={(item) => console.log(item?.name)}
/>;

Examples

Per-node icons

Set icon on a node, plus openIcon (shown while a folder is expanded) and selectedIcon (shown while selected). defaultNodeIcon / defaultLeafIcon fill in any node that doesn't specify its own.

Tracking selection

onSelectChange fires with the clicked TreeDataItem (folders included). The selected row stays highlighted.

Row actions

Give a node an actions node to render trailing controls — revealed on hover or when the row is selected. Clicks inside actions don't select or toggle the row.

Props

TreeDataItem

TreeRenderItemParams