Astryx Design System

Usage

An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes parent-child relationships.

ts
import {TreeList} from '@astryxdesign/core/TreeList'

Best practices

Guidance	Practices
Do	Provide meaningful labels and icons for each node to make the hierarchy easy to scan.
Do	Pre-expand important branches so users see key content immediately.
Don't	Nest more than 4–5 levels deep; flatten the structure or use a different pattern.
Don't	Use a tree for flat, non-hierarchical data; use a List instead.

Examples

Common configurations, variations, and states.

TreeList — File Tree With Icons

File browser tree with folder and document icons distinguishing directories from files.

TreeList — Interactive Settings

Settings tree with clickable items and a documentation link.

TreeList — Mailbox Tree

Email folder tree with unread badge counts.

TreeList — Navigation Tree

Navigation tree with a selected item for the current page.