Tree list

Hierarchical list with expand/collapse, selection, and depth indentation. Ideal for layer panels with nested frames.

Install

npx shadcn@latest add https://substrate.georgedrury.co.uk/r/tree-list

Page

Header

Logo

Navigation

Hero

Footer

"use client"

import { useState } from "react"

Component	Description
`TreeList`	Root container with `role="tree"`
`TreeItem`	Row with depth, selection, expand/collapse
`TreeExpandButton`	Chevron toggle that rotates when expanded
`TreeItemContent`	Truncated text label
`TreeItemIcon`	Colour dot or icon
`TreeItemActions`	Right-aligned actions, visible on hover

Manages expand/collapse state for a set of node IDs.

const { isExpanded, toggle, expandAll, collapseAll } = useTreeExpansion([
	"root",
])

Method	Description
`isExpanded`	Check if a node is expanded
`toggle`	Toggle a node's expanded state
`expandAll`	Expand a list of node IDs
`collapseAll`	Collapse all nodes