File Explorer

No checkboxes — single-click highlights a row, double-click 'opens' it. Connector lines make the hierarchy read at a glance.

src

components

Button.tsx

Input.tsx

hooks

index.ts

public

package.json

README.md

Show code

import { useState } from "react";
import { TreeKit, type TreeNode } from "@treekit-ui/core";
import { FolderIcon, FileIcon } from "./file-icons";

function withIcons(nodes) {
  return nodes.map((node) => ({
    ...node,
    icon: node.children ? <FolderIcon /> : <FileIcon />,
    children: node.children ? withIcons(node.children) : undefined,
  }));
}

export function FileExplorer({ data }) {
  const [opened, setOpened] = useState<string | null>(null);

  return (
    <TreeKit
      data={withIcons(data)}
      variant="connected"
      showCheckboxes={false}
      selectionMode="single"
      defaultExpandedIds={["src", "components"]}
      onNodeDoubleClick={(node) => setOpened(node.label)}
    />
  );
}

Icons come from node.icon, set per node when the data is built — see Icons. The connector lines are the connected variant.