Tree View

Displays a tree view of hierarchical data.

Overview

Installation

Theme

Components

Avatar

Button

Tabs

Forms

Checkbox

Radio

Text Field

Properties

No properties to configure

Example

Source Code

Installation

"use client";

import React from "react";
import { TreeView } from "@/subframe/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;