# Tree

> A hierarchical list of nodes built from nested `<details>` and `<summary>` elements, so a branch's expand/collapse state, keyboard toggling, and content hiding all come from the platform rather than tracked state.

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

Renders the tree's root host: a bordered `<div>` carrying `role="tree"`,
stacking Tree.Item nodes in block flow, with `data-empty`
centering a fallback message; an unlabeled tree logs a dev `console.warn`.

## Examples

```tsx
<Tree aria-label={t("files.title")}>
	<Tree.Item id="src">
		<Tree.ItemContent>
			<Tree.ExpandButton aria-label={t("files.expand")} />
			{t("files.folder", { name: "src" })}
		</Tree.ItemContent>
		<Tree.Item id="src-index">
			<Tree.ItemContent>{t("files.file", { name: "index.ts" })}</Tree.ItemContent>
		</Tree.Item>
	</Tree.Item>
</Tree>
```

```tsx
<Tree aria-label={t("files.title")} data-empty>
	{t("files.empty")}
</Tree>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | Tree.Item and Tree.LoadMoreItem nodes to render. |

Also accepts everything in `TagProps<"div">`.


### Tree.ItemContent

Renders Tree.ItemContentProps.children inside a native `<summary>` — the enclosing Tree.Item's always-visible row — indented from its ambient depth, with `aria-selected`/`aria-disabled` styling.

Also accepts everything in `TagProps<"summary">`.


### Tree.ExpandButton

Renders the chevron a node's row shows for a subtree, rotated 90 degrees while the enclosing Tree.Item's `<details>` carries `[open]`.

Also accepts everything in `TagProps<"span">`.