All componentssubtlesolidxssmmd
Tree View
Nested hierarchies with expandable branches, indent guides, and depth-aware padding.
src
components
card.tsx
package.json
README.md
Variants
src
components
card.tsx
package.json
README.md
src
components
card.tsx
package.json
README.md
Sizes
src
components
card.tsx
package.json
README.md
src
components
card.tsx
package.json
README.md
src
components
card.tsx
package.json
README.md
Install
zsh — tree-view
1bunx stylexblocks add tree-viewUsage — Ark UI
tree-view.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859import { TreeView } from "#components/ui/ark-ui/tree-view.tsx";import { createTreeCollection } from "@ark-ui/react/tree-view";
const collection = createTreeCollection({ rootNode: { value: "ROOT", label: "", children: [ { value: "src", label: "src", children: [{ value: "index.ts", label: "index.ts" }], }, ], },});
function TreeNode({ node, indexPath }) { return ( <TreeView.NodeProvider node={node} indexPath={indexPath}> {node.children ? ( <TreeView.Branch> {/* indicator rotation and selected styling resolve from the machine's node state */} <TreeView.BranchControl> <TreeView.BranchIndicator> <TreeView.Icon viewBox="0 0 16 16">{/* chevron */}</TreeView.Icon> </TreeView.BranchIndicator> <TreeView.BranchText>{node.label}</TreeView.BranchText> </TreeView.BranchControl> <TreeView.BranchContent> <TreeView.BranchIndentGuide /> {node.children.map((child, index) => ( <TreeNode key={child.value} node={child} indexPath={[...indexPath, index]} /> ))} </TreeView.BranchContent> </TreeView.Branch> ) : ( <TreeView.Item> <TreeView.ItemText>{node.label}</TreeView.ItemText> </TreeView.Item> )} </TreeView.NodeProvider> );}
export function Example() { return ( // variant/size resolve once on Root; expansion, selection, typeahead, // and depth-aware indentation come from the machine <TreeView.Root collection={collection} defaultExpandedValue={["src"]} size="md"> <TreeView.Tree> {collection.rootNode.children.map((node, index) => ( <TreeNode key={node.value} node={node} indexPath={[index]} /> ))} </TreeView.Tree> </TreeView.Root> );}