Basic Example

import * as React from "react";
import { TreeView, TreeViewItem, flattenTree } from "shadcn-treeview";
import { FileIcon, FolderIcon, FolderOpenIcon } from "lucide-react";

const FolderOpenClosedIcon = ({ isOpen }: { isOpen?: boolean }) => {
  const Icon = isOpen ? FolderOpenIcon : FolderIcon;
  return <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />;
};

export function BasicTreeView() {
  const data = React.useMemo(
    () =>
      flattenTree({
        name: "Project",
        children: [
          {
            name: "src",
            children: [
              { name: "components", children: [{ name: "tree-view.tsx" }] },
              { name: "app.tsx" },
              { name: "index.tsx" }
            ]
          },
          {
            name: "public",
            children: [{ name: "index.html" }, { name: "favicon.ico" }]
          },
          { name: "package.json" },
          { name: "README.md" }
        ]
      }),
    []
  );

  return (
    <TreeView
      data={data}
      aria-label="Basic file tree"
      className="w-64 rounded border p-2"
      nodeRenderer={({
        element,
        isBranch,
        isExpanded,
        isSelected,
        getNodeProps,
        level
      }) => (
        <TreeViewItem
          {...getNodeProps()}
          name={element.name}
          isBranch={isBranch}
          isExpanded={isExpanded}
          isSelected={isSelected}
          level={level}
          indentation={16}
          icon={
            isBranch ? (
              <FolderOpenClosedIcon isOpen={isExpanded} />
            ) : (
              <FileIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
            )
          }
        />
      )}
    />
  );
}

<TreeViewItem
  {...getNodeProps()}
  name={element.name}
  level={level}
  indentation={16}
  levelIndentation={24}  // Reduced from default 48
  // ...other props
/>