Tree View
Tree View displays hierarchical data as a collapsible tree structure with full RTL support.
Loading preview…
1
<TreeView items={nodes} selectedId={selectedId} onSelectedIdChange={setSelectedId} expandedIds={expandedIds} onExpandedIdsChange={setExpandedIds} />Installation
npx sdaia-ui@latest add tree-view
Usage
import { TreeView } from "@/components/ui/tree-view"<TreeView data={[]} />Examples
Default
Hierarchical tree view with expandable and collapsible nodes.
Loading preview…
1
<TreeView items={[{ id: 'a', label: 'Parent A', children: [{ id: 'a-1', label: 'Child' }] }]} />Checkbox
Tree view with checkbox selection for multi-select use cases.
Loading preview…
1
<TreeView2
items={[3
{4
id: 'docs',5
label: 'Documents',With Icons
Tree view with icons displayed alongside each node label.
Loading preview…
1
<TreeView2
items={[3
{4
id: 'design',5
label: 'Design System',API Reference
TreeViewProps
Props for the TreeView component.
Prop | Type | Default | Required |
|---|---|---|---|
items | TreeViewNode[] | - | required |
expandedIds | string[] | - | optional |
defaultExpandedIds | string[] | [] | optional |
onExpandedIdsChange | (expandedIds: string[]) => void | - | optional |
selectedId | string | - | optional |
defaultSelectedId | string | - | optional |
onSelectedIdChange | (id: string) => void | - | optional |
baseLevel | 1 | 2 | 3 | 4 | 1 | optional |