# FileTree

> A project layout drawn as a tree: directories are native `<details>` that fold without JavaScript, files carry an icon for their type, the file a page is about stands out as an accent pill, and short comments explain an entry in muted text beside it.

```ts
import { FileTree } from "@sdxc/ui/docs";
```

Renders the tree's card: an optional caption, then the top level of entries in a box
that scrolls sideways on its own when a deep path is wider than the page.

## Examples

```tsx
<FileTree aria-label="Project layout" nodes={[
	{ name: "app", children: [{ name: "routes.ts", highlight: true, comment: "every URL" }, "…"] },
	{ name: "package.json" },
]} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `nodes` | `Entry[]` |  |
| `"aria-label"` | `string` | Names the tree for assistive technology, such as "Project layout". |
| `title?` | `string` | A caption drawn above the tree, such as the project or directory the tree shows. |
| `moreLabel?` | `string` | Accessible text for the `"…"` placeholder, such as "More files". |

Also accepts everything in `Omit<TagProps<"div">, "title">`.