Component

File Tree

A hierarchical view of files and folders. This is an early-stage primitive — the example below shows the intended layout while the props API is finalized.

Overview

A typical file tree nests folders and files with indentation per depth level.

  • ▸src
    • ·index.ts
    • ▸components
      • ·button.tsx
      • ·input.tsx
  • ·package.json
  • ·README.md

Installation

$pnpm add @refraction-ui/react-file-tree

Usage

tsx
import { FileTree } from '@refraction-ui/react'

export function MyComponent() {
  return <FileTree />
}

Props

PropTypeDefaultDescription
FileTreeReact.FC--Renders a hierarchical file/folder tree. The component is an early-stage primitive — the props API (nodes, selection, expand/collapse) is still being finalized.