Tree View

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/tree-view.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/tree-view.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/tree-view.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/tree-view.json
    

Usage

      Copy
      <script setup lang="ts">
import { TreeView } from "@/components/ui/tree-view";
</script>

<template>
  <TreeView.Root>
    <!-- … -->
  </TreeView.Root>
</template>
    

Examples

Controlled Expanded

Pass the expandedValue and onExpandedChange props to the TreeView.Root component to control the expanded state of the tree view.

Controlled Selection

Pass the selectedValue and onSelectionChange props to the TreeView.Root component to control the selected state of the tree view.

Root Provider

An alternative way to control the tree view is to use the RootProvider component and the useTreeView hook. This way you can access the state and methods from outside the component.

Lazy Loading

Lazy loading is a feature that allows the tree view to load children of a node on demand (or async). This helps to improve the initial load time and memory usage.

To use this, you need to provide the following:

• loadChildren — A function that is used to load the children of a node.
• onLoadChildrenComplete — A callback that is called when the children of a node are loaded. Used to update the tree collection.
• childrenCount — A number that indicates the number of children of a branch node.

Lazy Mount

Lazy mounting is a feature that allows the content of a tree view to be rendered only when it is expanded. This is useful for performance optimization, especially when tree content is large or complex. To enable lazy mounting, use the lazyMount prop on the TreeView.Root component.

In addition, the unmountOnExit prop can be used in conjunction with lazyMount to unmount the tree view content when branches are collapsed, freeing up resources. The next time a branch is expanded, its content will be re-rendered.

Filtering

Filtering is useful when you have a large tree and you want to filter the nodes to only show the ones that match the search query. Here's an example that composes the filter method from the TreeCollection and useFilter hook to filter the nodes.

Links

Tree items can be rendered as links to another page or website. This could be useful for documentation sites.

Here's an example that modifies the tree collection to represent an hierarchical link structure. It uses the asChild prop to render the tree items as links, passing the href prop to a <a> element.

Virtualized

For large tree views with thousands of nodes, virtualization can significantly improve performance by only rendering visible nodes.

Key implementation details:

• Use useTreeView hook with TreeView.RootProvider for programmatic control
• Pass scrollToIndexFn to enable keyboard navigation within the virtualized list
• Use getVisibleNodes() to get the flattened list of currently visible nodes

Checkbox Tree

Use the defaultCheckedValue prop to enable checkbox selection mode. This allows users to select multiple nodes with checkboxes, including parent-child selection relationships.

Expand and Collapse All

Use the expand() and collapse() methods from the tree view context to programmatically expand or collapse all branches.

Mutation

Use the collection's remove() and replace() methods to dynamically add and remove nodes from the tree. This is useful for building file explorer interfaces where users can create and delete files.

Rename Node

Enable inline renaming of nodes using the canRename prop and onRenameComplete callback. Press F2 to activate rename mode on the focused node.

Composition

      Copy
      TreeView.Root
├── TreeView.Label
├── TreeView.Tree
│   └── TreeView.NodeProvider
│       ├── TreeView.Branch
│       │   ├── TreeView.BranchControl
│       │   │   ├── TreeView.BranchIndicator
│       │   │   └── TreeView.BranchText
│       │   └── TreeView.BranchContent
│       │       ├── TreeView.BranchIndentGuide
│       │       └── TreeView.Item
│       │           └── TreeView.ItemText
    

API

See Ark UI Tree View docs for full props and examples.