TreeView

Hierarchical data display with expand/collapse, keyboard navigation, and selection. Follows WAI-ARIA TreeView pattern.

Installation

# Install @opencosmos/ui to use TreeView
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

selected— Currently selected node ID

Usage

Import

import { TreeView } from '@opencosmos/ui';

Example

<TreeView>
  Content
</TreeView>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
selected	text	""	Currently selected node ID

Accessibility

Uses role="tree" and role="treeitem" per WAI-ARIA
Full keyboard navigation (Arrow keys, Enter, Space)
aria-expanded on collapsible nodes
aria-level indicates depth
aria-selected on selected node

Code Examples

Basic Usage

File tree with expand/collapse

import { TreeView } from '@opencosmos/ui'

const nodes = [
  { id: 'src', label: 'src', children: [
    { id: 'index', label: 'index.ts' },
    { id: 'app', label: 'App.tsx' },
  ]},
  { id: 'package', label: 'package.json' },
]

<TreeView
  nodes={nodes}
  onSelectChange={(id) => console.log('Selected:', id)}
/>

Controlled State

Controlled expand and selection state

import { TreeView } from '@opencosmos/ui'
import { useState } from 'react'

const [expanded, setExpanded] = useState(['src'])
const [selected, setSelected] = useState('')

<TreeView
  nodes={nodes}
  expanded={expanded}
  onExpandChange={setExpanded}
  selected={selected}
  onSelectChange={setSelected}
/>