Tree View

Tree structures. Free, MIT · Data and metrics › Lists and trees

Installation

npx valyro-cli@latest add tree-view

npx shadcn@latest add https://valyro.xyz/r/tree-view.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { TreeView } from 'valyro-ui';

Prop	Type	Default
`nodes`	`readonly TreeViewNode[]`		Root nodes; nodes with `children` render as expandable branches. Or compose them as children: `TreeView.Item` elements, nested for branches.
`children`	`ReactNode`		The compound form instead of `nodes`: `TreeView.Item` elements.
`expanded`	`string[]`		Ids of expanded nodes.
`defaultExpanded`	`string[]`	`[]`	Initial `expanded` when uncontrolled.
`onExpandedChange`	`(expanded: string[]) => void`		Called with the new `expanded` when it changes.
`selected`	`string \| null`		Id of the selected node.
`defaultSelected`	`string \| null`	`null`	Initial `selected` when uncontrolled.
`onSelectedChange`	`(id: string \| null) => void`		Called with the new `selected` when it changes.
`animation`	`'default' \| 'spring'`	`'default'`	A branch unfolds, pushing the rows below down, and folds away again when closed (it stays mounted until it has). `spring`: it opens on a spring. `default`: on the theme's curve and duration.

TreeView.Item (TreeViewItem)