Tree View

Displays a tree view of hierarchical data.

Overview

Installation

Theme

Components

Avatar

Button

Tabs

Forms

Checkbox

Radio

Text Field

Slots

children

Item3 props

Folder3 props

Item3 props

Folder3 props

Item3 props

Installation

Usage

Example

Source Code

"use client";

import React from "react";
import { TreeView } from "@/ui/components/TreeView";

function TreeViewExample() {
  return (
    <TreeView>
      <TreeView.Item label="Overview" />
      <TreeView.Item label="Installation" />
      <TreeView.Item label="Theme" />
      <TreeView.Folder label="Components">
        <TreeView.Item selected={true} label="Avatar" />
        <TreeView.Item label="Button" />
        <TreeView.Item label="Tabs" />
        <TreeView.Folder label="Forms">
          <TreeView.Item label="Checkbox" />
          <TreeView.Item label="Radio" />
          <TreeView.Item label="Text Field" />
        </TreeView.Folder>
      </TreeView.Folder>
    </TreeView>
  );
}

export default TreeViewExample;