Tree View

import { createTreeCollection } from "@ark-ui/react/tree-view";
import { 
  TreeView,
  TreeViewLabel,
  TreeViewTree,
  TreeViewNodeProvider,
  TreeViewBranch,
  TreeViewBranchControl,
  TreeViewBranchText,
  TreeViewBranchIndicator,
  TreeViewBranchContent,
  TreeViewBranchIndentGuide,
  TreeViewItem,
  TreeViewItemText
} from "@/components/ui/tree-view";

const collection = createTreeCollection({
  nodeToValue: (node) => node.id,
  nodeToString: (node) => node.name,
  rootNode: {
    id: "ROOT",
    name: "",
    children: [
      {
        id: "src",
        name: "src",
        children: [
          { id: "src/app.tsx", name: "app.tsx" },
          { id: "src/index.ts", name: "index.ts" },
        ],
      },
      { id: "package.json", name: "package.json" },
    ],
  },
});

<TreeView collection={collection}>
  <TreeViewLabel>File Explorer</TreeViewLabel>
  <TreeViewTree>
    {collection.rootNode.children?.map((node, index) => (
      <TreeNode key={node.id} node={node} indexPath={[index]} />
    ))}
  </TreeViewTree>
</TreeView>