Tree View

Stable

Hierarchical directory and node tree navigator with expandable folders, custom icon glyphs, keyboard navigation, and neon active branch markers.

Installation

$pnpm add @siberui/react

Import

tsx
import { 
  TreeView, 
  type TreeDataItem 
} from '@siberui/react';

Basic Usage & Recursive Hierarchy

Pass a recursive TreeDataItem[] array and specify initially expanded nodes using defaultExpandedIds.

CORE_NETWORK
orbital-sentinels
sat-alpha.ts
sat-beta.ts
airgap-manifest.json
Selected: sat-alpha.ts
tsx
<TreeView
  data={clusterData}
  defaultExpandedIds={['core-network', 'orbital-cluster']}
  defaultSelectedId="sat-alpha.ts"
  onNodeSelect={(node) => console.log('Selected:', node.label)}
  className="h-64 max-w-sm"
/>

Neon Cybernetic Tree & Monospace Labels

Set variant="neon" to apply cyan laser selection borders, illuminated folder glyphs, and monospace typography.

CORE_NETWORK
security-mesh
kyber-hsm.bin
firewall.cfg
airgap-manifest.json
tsx
<TreeView
  variant="neon"
  data={clusterData}
  defaultExpandedIds={['core-network', 'security-mesh']}
  className="h-64 max-w-sm"
/>

Frosted Cyber-Glass Directory Tree

Layered acrylic directory tree floating over circuit textures with perimeter laser sweeps.

CORE_NETWORK
airgap-manifest.json
tsx
<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden flex justify-center">
  <TreeView
    variant="glass"
    data={clusterData}
    defaultExpandedIds={['core-network']}
    className="h-64 w-full max-w-xs"
  />
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Subnet Hierarchy Card

Composite mission defense card embedding the filesystem tree.

NETWORK TOPOLOGY TREE

ONLINE

Active subnets and endpoint cryptographic nodes.

CORE_NETWORK
orbital-sentinels
sat-alpha.ts
sat-beta.ts
airgap-manifest.json
tsx
<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-3 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">NETWORK TOPOLOGY TREE</CardTitle>
      <Badge variant="neon" size="sm">ONLINE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Active subnets and endpoint cryptographic nodes.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-4">
    <div className="h-60 rounded-lg overflow-hidden border border-cyan-500/20 bg-black/40">
      <TreeView
        variant="neon"
        data={clusterData}
        defaultExpandedIds={['core-network', 'orbital-cluster']}
        className="h-full w-full"
      />
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (5)← swipe to inspect →
PropertyDescriptionTypeDefault
data
Array of TreeDataItem objects representing the recursive tree hierarchy.
TreeDataItem[]
-
variant
Visual theme for tree borders, hover states, and selection markers.
"default" | "neon" | "glass"
"default"
defaultExpandedIds
Array of string node IDs that should be expanded on initial render.
string[]
[]
defaultSelectedId
ID of the node that is initially selected.
string
-
onNodeSelect
Callback fired when a node row is clicked.
(node: TreeDataItem) => void
-

Accessibility

  • ARIA Tree Pattern: Container implements role="tree", individual items output role="treeitem" with aria-expanded and aria-selected.

Best Practices

  • Custom Glyphs: Provide semantic icons on TreeDataItem.icon to quickly differentiate file types (e.g. scripts vs keys).