Components
/
Tree
Tree
A hierarchical tree view component for displaying nested data structures with expand/collapse functionality.
Estimated
ID
Name
Qty
Unit
Rate
X
Overtime
Working
Committed
Actuals
Installation
npx shadcn@latest add https://ui.saturation.io/r/tree.jsonUsage
import {
TreeProvider,
TreeView,
TreeNode,
TreeNodeTrigger,
TreeNodeContent,
TreeExpander,
TreeIcon,
TreeLabel,
} from "@/components/ui/tree"
export default function Example() {
return (
<TreeProvider>
<TreeView>
<TreeNode nodeId="root">
<TreeNodeTrigger>
<TreeExpander hasChildren />
<TreeIcon hasChildren />
<TreeLabel>Root</TreeLabel>
</TreeNodeTrigger>
<TreeNodeContent hasChildren>
<TreeNode level={1} nodeId="child">
<TreeNodeTrigger>
<TreeExpander />
<TreeIcon />
<TreeLabel>Child</TreeLabel>
</TreeNodeTrigger>
</TreeNode>
</TreeNodeContent>
</TreeNode>
</TreeView>
</TreeProvider>
)
}Examples
Default
A basic tree structure with folders and files.
Projects
Website Redesign
Homepage
About Page
Contact Form
Mobile App
Resources
Column Visibility
Manage column visibility with groups and individual columns. Click the eye icon to toggle visibility.
Estimated
ID
Name
Qty
Unit
Rate
X
Overtime
Working
Committed
Actuals
File System
A tree representing a file system structure.
src
components
button.tsx
input.tsx
card.tsx
lib
app.tsx
public
package.json
Collapsed by Default
All nodes start collapsed.
Documents
API Reference
| Component | Prop | Type | Description |
|---|---|---|---|
| TreeProvider | defaultExpandedIds | string[] | IDs of nodes expanded by default |
| TreeNode | nodeId | string | Unique identifier for the node |
| TreeNode | level | number | Nesting level (0-based) |
| TreeNode | isLast | boolean | Whether this is the last child |
| TreeExpander | hasChildren | boolean | Show chevron for expandable nodes |
| TreeIcon | hasChildren | boolean | Show folder vs file icon |
| TreeNodeContent | hasChildren | boolean | Required for proper rendering |
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.