# Tree (UI SDK): File paths

> Pass `paths` for a file explorer, with folders first. With `activation="automatic"` the arrow keys select, and an `onAction` that returns a promise marks the row pending until it settles.

Canonical: https://hextaui.com/docs/ui-sdk-tree/examples/paths

Component docs: https://hextaui.com/docs/ui-sdk-tree

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-tree-paths.json
```

This adds `components/examples/ui-sdk-tree/paths.tsx` with the Tree component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-tree/paths.tsx"
"use client"

import * as React from "react"
import { IconLoader2 } from "@tabler/icons-react"

import {
  Tree,
  TreeGroup,
  TreeItem,
  TreeItemIndicator,
  TreeItemLabel,
  treeFromPaths,
  type TreeItemData,
} from "@/components/ui/ui-sdk-tree"

const paths = [
  "src/index.ts",
  "src/lib/format.ts",
  "src/lib/parse.ts",
  "src/routes/home.tsx",
  "src/routes/about.tsx",
  "tests/",
  "package.json",
  "tsconfig.json",
]

const items = treeFromPaths(paths)
const files = new Set(paths.filter((path) => !path.endsWith("/")))

function Items({ items }: { items: TreeItemData[] }) {
  return items.map((item) => (
    <TreeItem key={item.value} value={item.value}>
      <TreeItemLabel>
        {(state) => (
          <>
            {item.children && <TreeItemIndicator />}
            <span>{item.label}</span>
            {state.pending && (
              <IconLoader2 className="ms-auto motion-safe:animate-spin" />
            )}
          </>
        )}
      </TreeItemLabel>
      {item.children && item.children.length > 0 && (
        <TreeGroup>
          <Items items={item.children} />
        </TreeGroup>
      )}
    </TreeItem>
  ))
}

function UiSdkTreePaths() {
  const [opened, setOpened] = React.useState<string | null>(null)

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Tree
        aria-label="Project"
        paths={paths}
        defaultExpanded={["src"]}
        defaultValue="src/index.ts"
        activation="automatic"
        onAction={async (value) => {
          if (!files.has(value)) {
            return
          }
          await new Promise((resolve) => setTimeout(resolve, 600))
          setOpened(value)
        }}
      >
        <Items items={items} />
      </Tree>
      <p className="text-sm text-muted-foreground" aria-live="polite">
        {opened ? `Opened ${opened}` : "Press Enter to open a file."}
      </p>
    </div>
  )
}

export { UiSdkTreePaths }
```

## Props in this example

### Tree

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `paths` | `string[]` | – | File paths. Folders become branches; a path ending in / is an empty folder. |
| `defaultValue` | `string \| string[] \| null` | – |  |
| `activation` | `"automatic" \| "manual"` | `"manual"` |  |
| `defaultExpanded` | `string[]` | – |  |
| `onAction` | `(value, details) => unknown` | – | Runs on press or Enter. Return a promise to mark the item pending. |

### TreeItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Unique in the tree. |

## More Tree examples

- [Items as data](https://hextaui.com/docs/ui-sdk-tree/examples/data)
- [Multiple selection](https://hextaui.com/docs/ui-sdk-tree/examples/multiple)
- [Checkboxes](https://hextaui.com/docs/ui-sdk-tree/examples/checkboxes)
- [Navigation](https://hextaui.com/docs/ui-sdk-tree/examples/links)
- [Loading children](https://hextaui.com/docs/ui-sdk-tree/examples/lazy)
- [Lines and small size](https://hextaui.com/docs/ui-sdk-tree/examples/lines)
- [Controller](https://hextaui.com/docs/ui-sdk-tree/examples/controller)
- [Find in page](https://hextaui.com/docs/ui-sdk-tree/examples/find-in-page)
- [Disabled](https://hextaui.com/docs/ui-sdk-tree/examples/disabled)
- [Right to left](https://hextaui.com/docs/ui-sdk-tree/examples/rtl)