Primitive / Moleculebeta

Tree

Hierarchical tree view for file structures, navigation, and nested data.

@glinui/uiComponent: tree

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add tree

Usage

File Tree

Display a project file structure with folders and linked files.

button.tsx input.tsx

index.ts

package.json

TSX

1import { Tree } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Tree
6      variant="outline"
7      nodes={[
8        {
9          label: "src",
10          children: [
11            {
12              label: "components",
13              children: [
14                { label: "button.tsx", href: "#" },
15                { label: "input.tsx", href: "#" }
16              ]
17            },
18            { label: "index.ts", href: "#" }
19          ]
20        },
21        { label: "package.json", href: "#" }
22      ]}
23    />
24  )
25}

With Badges

Use badges to annotate nodes with status or type information.

button.tsx button.test.tsxtest

use-liquid-glass.tsxnew

TSX

1import { Tree } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Tree
6      variant="default"
7      nodes={[
8        {
9          label: "Components",
10          children: [
11            { label: "button.tsx", href: "#" },
12            { label: "button.test.tsx", href: "#", badge: "test", badgeVariant: "success" }
13          ]
14        },
15        {
16          label: "Hooks",
17          children: [
18            { label: "use-liquid-glass.tsx", href: "#", badge: "new", badgeVariant: "warning" }
19          ]
20        }
21      ]}
22    />
23  )
24}

Glass Variant

Home About Contact

TSX

1import { Tree } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <Tree
6      variant="glass"
7      nodes={[
8        {
9          label: "Navigation",
10          children: [
11            { label: "Home", href: "#" },
12            { label: "About", href: "#" },
13            { label: "Contact", href: "#" }
14          ]
15        }
16      ]}
17    />
18  )
19}

Accessibility

Folder nodes are interactive buttons with expand/collapse behavior.
Linked leaf nodes render as anchor elements.
Tree structure is conveyed visually through indentation and icons.

Keyboard Interactions

Key	Action
`Enter / Space`	Toggle folder expand/collapse.
`Tab`	Navigate between interactive nodes.

Reduced Motion

Chevron rotation uses CSS transition that respects `prefers-reduced-motion`.

Affected properties

transform

API Reference

Prop	Type	Required	Default	Description
`nodes`	`TreeNode[]`	Yes	`-`	Array of tree data nodes to render.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`default`	Visual treatment.
`defaultExpanded`	`boolean`	No	`true`	Expand all folders by default.
`className`	`string`	No	`-`	Extra classes for the tree root wrapper.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Tree } from "@glinui/ui"

Source Files

tree.tsx

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/tree.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

TreeProps

`TreeProps`

Prop	Type	Required	Default	Description
`className`	`string`	No	`-`	Extra classes for the tree root wrapper.
`defaultExpanded`	`boolean`	No	`true`	Expand all folders by default
`nodes`	`TreeNode[]`	Yes	`-`	Tree data
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from treeVariants.