Tree

A hierarchical list of nodes built from nested <details> and <summary> elements.

packages

components

tree.tsx

table.tsx

mixins

treeKeys.ts

package.json

result

index.ts

1 files selectedArrows move · type to jump · Enter selects

View code

let model = new SelectionModel({
	mode: "multiple",
	keys,
	selectedKeys: ["packages/ui/package.json"],
});
model.addEventListener("change", () => void handle.update());

<Tree aria-label="Repository files" aria-multiselectable="true" mix={[treeKeys(model)]}>
	<Tree.Item id="packages" open>
		<Tree.ItemContent data-tree-item="packages" aria-expanded="true">
			<Tree.ExpandButton />
			<FolderIcon aria-hidden="true" />
			packages
		</Tree.ItemContent>

		<Tree.Item id="packages-ui" open>
			<Tree.ItemContent data-tree-item="packages/ui" aria-expanded="true">
				<Tree.ExpandButton />
				<FolderIcon aria-hidden="true" />
				ui
			</Tree.ItemContent>

			<Tree.Item id="packages-ui-components">
				<Tree.ItemContent data-tree-item="packages/ui/components" aria-expanded="false">
					<Tree.ExpandButton />
					<FolderIcon aria-hidden="true" />
					components
				</Tree.ItemContent>

				<Tree.Item id="packages-ui-components-tree">
					<Tree.ItemContent data-tree-item="packages/ui/components/tree.tsx">
						<FileCodeIcon aria-hidden="true" />
						tree.tsx
					</Tree.ItemContent>
				</Tree.Item>
				<Tree.Item id="packages-ui-components-table">
					<Tree.ItemContent data-tree-item="packages/ui/components/table.tsx">
						<FileCodeIcon aria-hidden="true" />
						table.tsx
					</Tree.ItemContent>
				</Tree.Item>
			</Tree.Item>

			<Tree.Item id="packages-ui-mixins">
				<Tree.ItemContent data-tree-item="packages/ui/mixins" aria-expanded="false">
					<Tree.ExpandButton />
					<FolderIcon aria-hidden="true" />
					mixins
				</Tree.ItemContent>
				<Tree.Item id="packages-ui-mixins-tree-keys">
					<Tree.ItemContent data-tree-item="packages/ui/mixins/treeKeys.ts">
						<FileCodeIcon aria-hidden="true" />
						treeKeys.ts
					</Tree.ItemContent>
				</Tree.Item>
			</Tree.Item>

			<Tree.Item id="packages-ui-package-json">
				<Tree.ItemContent data-tree-item="packages/ui/package.json">
					<FileBracesIcon aria-hidden="true" />
					package.json
				</Tree.ItemContent>
			</Tree.Item>
		</Tree.Item>

		<Tree.Item id="packages-result">
			<Tree.ItemContent data-tree-item="packages/result" aria-expanded="false">
				<Tree.ExpandButton />
				<FolderIcon aria-hidden="true" />
				result
			</Tree.ItemContent>
			<Tree.Item id="packages-result-index">
				<Tree.ItemContent data-tree-item="packages/result/index.ts">
					<FileCodeIcon aria-hidden="true" />
					index.ts
				</Tree.ItemContent>
			</Tree.Item>
		</Tree.Item>
	</Tree.Item>
</Tree>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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.

Composition

The parts the component publishes, each a static property of the host.

Tree
Tree.ItemContentRenders 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.
Tree.ExpandButtonRenders the chevron a node's row shows for a subtree, rotated 90 degrees while the enclosing Tree.Item's <details> carries [open].

Examples

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

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

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

Also accepts everything in TagProps<"div">.

Tree.ItemContent

Also accepts everything in TagProps<"summary">.

Tree.ExpandButton

Also accepts everything in TagProps<"span">.