Tree

Tree shows hierarchical data as expandable / collapsible branches, like a folder tree or a navigation catalog.

A TreeItem is a branch or a leaf; put a Tree inside a branch to add a child level, indented automatically through --tree-level. Keyboard: ↑ ↓ move, → opens / moves into the children, ← closes / goes back to the parent, Enter selects.

src

components3

Button.tsx

Card.tsx

Tree.tsx

main.tsx

public

package.json

Import

Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

TSX

// npm install yugen-uiimport { Tree, TreeItem, TreeItemLayout } from "yugen-ui";

Variants

Each tile is a standalone example: hover to copy, or press Code to see the source.

Documents

Plan.docx

Contract.pdf

Cover image.png

Small size

24px rows, caption1 text, 16px icons.

Design team

General

Announcements

Transparent & actions

appearance="transparent" removes the hover background; actions appear only on hover or focus.

Inbox

Work

Family

Sent

Selection

selectionMode="single": click or press Enter to select; the selected item gets a brand tint and an indicator bar.

Usage

Give the Tree an aria-label, and a stable value to each TreeItem you need to control.
Use a leading icon (Folder / Document) to tell item types apart.
Keep the depth to 3–4 levels at most so the tree is easy to scan.

Don't

Don't use Tree for a flat list. Use List.
Don't put important actions only in the hidden actions area; provide another way to reach them.
Don't give folder icons the brand color.

Props

Prop · Type	Default	Description
Tree.size"small" \| "medium"	Default: "medium"	Row height 24 / 32px.
Tree.appearance"subtle" \| "transparent"	Default: "subtle"	Background on hover.
Tree.openItems / defaultOpenItems / onOpenChangestring[] / (openItems, { value, open }) => void	Default: —	Open branches.
Tree.selectionMode / selectedValue / onSelectionChange"none" \| "single" / string / (value) => void	Default: "none"	Single selection (aria-selected).
TreeItem.itemType"branch" \| "leaf"	Default: —	A branch with a subtree, or a leaf item.
TreeItem.valuestring	Default: —	Identifier used by openItems / selectedValue.
TreeItemLayout.iconBefore / iconAfter / aside / actions / expandIconReactNode	Default: —	Areas of the row; actions appear only on hover / focus.