Tree View

Name: FivUI
Author: Fivex Labs

A hierarchical tree view component for displaying nested data structures like file systems, navigation menus, and organizational charts.

Project Structure

src

components

Header.tsx

Footer.tsx

pages

app.tsx

public

package.json

README.md

tsx

import { 
  TreeView, 
  TreeViewRoot, 
  TreeViewLabel, 
  TreeViewContent,
  type TreeNode 
} from "@/components/ui/tree-view"
import { Code, FileText, Image } from "lucide-react"

const data: TreeNode[] = [
  {
    id: "src",
    name: "src",
    children: [
      {
        id: "src/components",
        name: "components",
        children: [
          { id: "src/components/Button.tsx", name: "Button.tsx", icon: <Code className="w-4 h-4" /> },
          { id: "src/components/Card.tsx", name: "Card.tsx", icon: <Code className="w-4 h-4" /> },
        ]
      },
      { id: "src/app.tsx", name: "app.tsx", icon: <Code className="w-4 h-4" /> },
    ]
  },
  { id: "package.json", name: "package.json", icon: <FileText className="w-4 h-4" /> },
]

export function TreeViewDemo() {
  return (
    <TreeViewRoot>
      <TreeViewLabel>Project Structure</TreeViewLabel>
      <TreeViewContent>
        <TreeView 
          data={data}
          defaultExpanded={["src"]}
        />
      </TreeViewContent>
    </TreeViewRoot>
  )
}

Installation

bash

npx fivui add tree-view

Usage

tsx

import { 
  TreeView, 
  TreeViewRoot, 
  TreeViewLabel, 
  TreeViewContent,
  type TreeNode 
} from "@/components/ui/tree-view"

Examples

Basic Tree View

A simple tree view with expandable nodes and custom icons.

src

components

pages

app.tsx

public

package.json

README.md

tsx

const data: TreeNode[] = [
  {
    id: "src",
    name: "src",
    children: [
      {
        id: "src/components",
        name: "components",
        children: [
          { id: "button.tsx", name: "button.tsx", icon: <Code className="w-4 h-4" /> },
          { id: "card.tsx", name: "card.tsx", icon: <Code className="w-4 h-4" /> },
        ]
      },
    ]
  },
  { id: "package.json", name: "package.json", icon: <FileText className="w-4 h-4" /> },
]

<TreeView 
  data={data}
  defaultExpanded={["src"]}
/>

Sizes

Tree View supports three different sizes: sm, md (default), and lg.

Small

Fivex Labs

Engineering

Design

Marketing

Medium (Default)

Fivex Labs

Engineering

Design

Marketing

Large

Fivex Labs

Engineering

Design

Marketing

tsx

<TreeView data={data} size="sm" />
<TreeView data={data} size="md" />
<TreeView data={data} size="lg" />

Variants

Tree View supports default and outline variants.

Default

Fivex Labs

Engineering

Design

Marketing

Outline

Fivex Labs

Engineering

Design

Marketing

tsx

<TreeView data={data} variant="default" />
<TreeView data={data} variant="outline" />

Multiple Selection

Enable multiple selection by setting the multiple prop to true.

src

components

Header.tsx

Footer.tsx

pages

app.tsx

public

package.json

README.md

tsx

<TreeView 
  data={data}
  multiple
  defaultSelected={["file1.tsx", "file2.tsx"]}
/>

Disabled Nodes

Individual nodes can be disabled by setting the disabled property.

Enabled Folder

enabled-file.tsx

disabled-file.tsx

Disabled Folder

tsx

const data: TreeNode[] = [
  {
    id: "folder",
    name: "Folder",
    children: [
      { id: "enabled-file", name: "enabled-file.tsx" },
      { id: "disabled-file", name: "disabled-file.tsx", disabled: true },
    ]
  },
  { id: "disabled-folder", name: "Disabled Folder", disabled: true },
]

<TreeView data={data} />

Event Handlers

Tree View provides event handlers for selection, expansion, and collapse events.

Fivex Labs

Engineering

Design

Marketing

The Tree View component supports onSelect, onExpand, and onCollapse event handlers.

tsx

<TreeView 
  data={data}
  onSelect={(node) => console.log("Selected:", node.name)}
  onExpand={(node) => console.log("Expanded:", node.name)}
  onCollapse={(node) => console.log("Collapsed:", node.name)}
/>

API Reference

Tree View

The main Tree View component that renders the hierarchical tree structure.

Prop	Type	Default	Description
data	TreeNode[]	-	Array of tree nodes to display
variant	"default" \| "outline"	"default"	The visual variant of the tree
size	"sm" \| "md" \| "lg"	"md"	The size of the tree items
multiple	boolean	false	Enable multiple selection
expandOnClick	boolean	true	Whether clicking expands/collapses nodes
defaultExpanded	string[]	[]	Default expanded node IDs
defaultSelected	string[]	[]	Default selected node IDs
onSelect	(node: TreeNode) => void	-	Called when a node is selected
onExpand	(node: TreeNode) => void	-	Called when a node is expanded
onCollapse	(node: TreeNode) => void	-	Called when a node is collapsed

TreeNode

Interface for tree node data structure.

Property	Type	Required	Description
id	string	✓	Unique identifier for the node
name	string	✓	Display name for the node
children	TreeNode[]	-	Child nodes (makes this a branch node)
icon	React.ReactNode	-	Custom icon for the node
disabled	boolean	-	Whether the node is disabled

Compound Components

Additional components for enhanced composition and layout.

Component	Description
TreeViewRoot	Root container for the tree view with spacing
TreeViewLabel	Label component for the tree view
TreeViewContent	Content wrapper for the tree view

Accessibility

The Tree View component follows WAI-ARIA guidelines for tree views and includes:

Proper ARIA roles (tree, treeitem, group)
Keyboard navigation support (Arrow keys, Enter, Space)
Screen reader announcements for expand/collapse states
Focus management and visual indicators
Proper labeling for expand/collapse buttons