# Tree Standard 1 - Standard tree

> Basic nested folder and file tree with expand and collapse.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/tree-tree-standard-1).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/tree-tree-standard-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/tree-tree-standard-1-light-8023b8bf6e47bef6.png
- Registry item: https://shadcnblocks.com/r/tree-tree-standard-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/tree-tree-standard-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://www.kibo-ui.com/r/tree.json`

## Files

### `example/tree/tree-standard-1.tsx`

```tsx
"use client";

import {
  TreeExpander,
  TreeIcon,
  TreeLabel,
  TreeNode,
  TreeNodeContent,
  TreeNodeTrigger,
  TreeProvider,
  TreeView,
} from "@/components/kibo-ui/tree";

export const title = "Standard tree";

type TreeItem = {
  id: string;
  name: string;
  children?: TreeItem[];
};

const treeData: TreeItem[] = [
  {
    id: "src",
    name: "src",
    children: [
      {
        id: "components",
        name: "components",
        children: [
          { id: "button.tsx", name: "button.tsx" },
          { id: "input.tsx", name: "input.tsx" },
        ],
      },
      {
        id: "lib",
        name: "lib",
        children: [{ id: "utils.ts", name: "utils.ts" }],
      },
    ],
  },
];

const renderNodes = (nodes: TreeItem[], level = 0) =>
  nodes.map((node, index) => {
    const hasChildren = Boolean(node.children?.length);
    const isLast = index === nodes.length - 1;

    return (
      <TreeNode key={node.id} isLast={isLast} level={level} nodeId={node.id}>
        <TreeNodeTrigger>
          <TreeExpander hasChildren={hasChildren} />
          <TreeIcon hasChildren={hasChildren} />
          <TreeLabel>{node.name}</TreeLabel>
        </TreeNodeTrigger>
        {hasChildren && node.children && (
          <TreeNodeContent hasChildren>
            {renderNodes(node.children, level + 1)}
          </TreeNodeContent>
        )}
      </TreeNode>
    );
  });

const Example = () => (
  <div className="w-full max-w-md rounded-md border">
    <TreeProvider>
      <TreeView>{renderNodes(treeData)}</TreeView>
    </TreeProvider>
  </div>
);

export default Example;
```