Tree - Beautify Demo

Hierarchical tree built on ul/li with states, shapes, densities, indent modes, node styles, checkboxes, notes, expand levels, and dynamic colors.

Notes

Structure must be ul > li. Each row is div[data-role="node"] containing div[data-role="content"] > span[data-role="label"] and optionally span[data-role="arrow"], label.check, div[data-role="note"], span[data-role="spacer"], div[data-role="custom"].
Trees cannot be nested. Do not use ul/li inside non-list nodes.
Child levels are collapsed by default. Use .tree-expanded (one branch), .tree-expanded-n (up to level n), or .tree-expanded-all (all) to expand.
.tree-selected colors the whole row, .tree-active colors only the label, and .tree-disabled disables a row or the root.
Edit mode replaces the label text with an <input> inside span[data-role="label"].
The component is static; use JavaScript for click-to-expand/collapse behavior.

Basic usage

Default (collapsed)

A
- A-1
- A-2
B
C

Single branch expanded (`.tree-expanded` on node)

A
- A-1
- A-2
B
C

All expanded (`.tree-expanded-all`)

A
- A-1
- A-2
B
- B-1
- B-2
C
- C-1
- C-2

Expand levels (`.tree-expanded-1` ~ `.tree-expanded-3`)

Level 1

A
- A-1
- A-2
B

Level 2

A
- A-1
  - A-1-1
  - A-1-2
- A-2
B

Level 3

A
- A-1
  - A-1-1
    - A-1-1-1
    - A-1-1-2
  - A-1-2
- A-2
B

States

Selected (`.tree-selected`) — colors the whole row

A
- A-1
- A-2
B
C

Active (`.tree-active`) — colors only the label

A
- A-1
- A-2
B
C

Disabled (`.tree-disabled`) — single node or root

A
- A-1
- A-2
B
C

Hoverable (`.tree-hoverable`)

A
- A-1
- A-2
B
C

Features

Edit mode — label replaced by `<input>`

- A-1
- A-2
B
C

Checkbox integration (`label.check`)

Note nodes (`div[data-role="note"]`)

A

This is apple
- A-1
  
  This is apple-1
- A-2
  
  This is apple-2
B

This is banana
C

This is cherry

Complex content (avatar, badge, spacer)

A 2 Apple
- A-1
- A-2
B
C

Arrow position (first child)

All data-role="node" elements should have a built-in data-role="arrow" child element to ensure consistent indentation.

A
- A-1
- A-2
B
- B-1
- B-2
C
- C-1
- C-2

Padded (`.tree-padded`)

A
- A-1
- A-2
B
C

Shapes

Default

Square (`.tree-square`)

Rounded (`.tree-rounded`)

Pill (`.tree-pill`)

Density

Tight (`.tree-tight`)

Snug (`.tree-snug`)

Compact (`.tree-compact`)

Relaxed (`.tree-relaxed`)

Loose (`.tree-loose`)

Indent modes

Cascading (`.tree-indent-cascading`) — default

A
- A-1
- A-2
B

Dedicated (`.tree-indent-dedicated`) — requires `--tree-level` and `span[data-role="indent"]`

A

Apple note
- A-1
  
  Apple-1 note
- A-2
B
C

Node styles

Button style (`.tree-btns`)

A
- A-1
- A-2
B
C

List style (`.tree-entries`) — fully expanded, check icon on selected

A
This is a custom node
- A-1
- A-2
B
This is a custom node
C
This is a custom node

Colors

Default (primary)

Primary (`.tree-primary`)

Success (`.tree-success`)

Warning (`.tree-warning`)

Error (`.tree-error`)

Color + entries style

Use cases

File explorer

📁 src
- 📁 components
  - 📄 Button.tsx
  - 📄 Tree.tsx
- 📄 index.ts
- 📄 utils.ts
📁 public
- 📄 index.html
📄 package.json

Permission / category selector with checkboxes

User management
- View users
- Edit users
- Delete users
Role management
- View roles
- Assign roles

Tag filter (btns style)

All
Frontend
Backend
DevOps
Design

Settings menu (entries style with colors)

General
Language, region, appearance
Notifications
Email, push, in-app alerts
Privacy
Data sharing and cookies
Security
Password, 2FA, sessions

Tree Component

Notes

Basic usage

Default (collapsed)

Single branch expanded (.tree-expanded on node)

All expanded (.tree-expanded-all)

Expand levels (.tree-expanded-1 ~ .tree-expanded-3)

Level 1

Level 2

Level 3

States

Selected (.tree-selected) — colors the whole row

Active (.tree-active) — colors only the label

Disabled (.tree-disabled) — single node or root

Hoverable (.tree-hoverable)

Features

Edit mode — label replaced by <input>

Checkbox integration (label.check)

Note nodes (div[data-role="note"])