All componentssubtlesolidxssmmd
Tree View
Nested hierarchies with expandable branches, indent guides, and depth-aware padding.
- button.tsx
- card.tsx
- package.json
- README.md
Variants
- button.tsx
- card.tsx
- package.json
- README.md
- button.tsx
- card.tsx
- package.json
- README.md
Sizes
- button.tsx
- card.tsx
- package.json
- README.md
- button.tsx
- card.tsx
- package.json
- README.md
- button.tsx
- card.tsx
- package.json
- README.md
Install
zsh — tree-view
1bunx stylexblocks add tree-viewUsage — Base UI
tree-view.tsx
123456789101112131415161718192021222324252627import { TreeView } from "#components/ui/base-ui/tree-view.tsx";
export function Example() { return ( // Base UI has no tree-view machine; the component carries the expanded // state (expandedValue / defaultExpandedValue / onExpandedChange) and // tracks depth for the recipe's --depth indentation itself <TreeView.Root defaultExpandedValue={["src"]} size="md"> <TreeView.Tree aria-label="Files"> <TreeView.Branch value="src"> <TreeView.BranchControl> <TreeView.BranchIndicator> <TreeView.Icon viewBox="0 0 16 16">{/* chevron */}</TreeView.Icon> </TreeView.BranchIndicator> <TreeView.BranchText>src</TreeView.BranchText> </TreeView.BranchControl> <TreeView.BranchContent> <TreeView.BranchIndentGuide /> <TreeView.Item> <TreeView.ItemText>index.ts</TreeView.ItemText> </TreeView.Item> </TreeView.BranchContent> </TreeView.Branch> </TreeView.Tree> </TreeView.Root> );}