Tree view
A hierarchical list with keyboard navigation. It selects one node, several nodes, or cascades checkboxes with a derived mixed state; filters with a debounced search field in either lenient or strict mode; loads children on demand; templates each row; and reorders by dragging.
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { TreeView } from "@carsxe/design-system/components/tree-view"Usage
tsx
import { TreeView } from "@carsxe/design-system/components/tree-view"
<TreeView
aria-label="API catalog"
items={catalog}
defaultExpanded={["vehicle"]}
defaultValue={["specs"]}
/>Cascading checkboxes
1 checked. A branch shows a dash while only some of its children are checked.
Filtering
Strict filtering
Lazy children
Row template
Expand and collapse all
Drag and drop
Drag a row onto the top or bottom edge of another to reorder it, or onto its middle to nest it.
API Reference
| Prop | Type | Default |
|---|---|---|
| items | TreeViewItem[] | — |
| value | string[] | — |
| defaultValue | string[] | [] |
| onValueChange | (value: string[]) => void | — |
| expanded | string[] | — |
| defaultExpanded | string[] | [] |
| onExpandedChange | (value: string[]) => void | — |
| selectionMode | "single" | "multiple" | "checkbox" | "single" |
| multiple | boolean | false |
| filter | string | — |
| defaultFilter | string | "" |
| onFilterChange | (filter: string) => void | — |
| showFilter | boolean | false |
| filterDelay | number | 300 |
| filterMode | "lenient" | "strict" | "lenient" |
| emptyMessage | ReactNode | — |
| onExpand | (item: TreeViewItem) => void | Promise<void> | — |
| renderItem | (item: TreeViewItem, state: TreeViewItemState) => ReactNode | — |
| dragAndDrop | boolean | false |
| onItemsMove | (details: TreeViewMoveDetails) => void | — |
| disabled | boolean | false |