# FileTree

Presentational file/folder tree for docs and static previews. Nest `FileTree.Folder` and `FileTree.File` — not interactive (use `Tree` for expand/selection).

## Examples

### Default

A single folder with a couple of files.

```tsx
import { FileTree } from '@var-ui/react';

<FileTree>
  <FileTree.Folder name="src">
    <FileTree.File name="index.ts" />
  </FileTree.Folder>
</FileTree>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Nested folders

Nest folders for multi-package or monorepo layouts.

```tsx
import { FileTree } from '@var-ui/react';

<FileTree>
  <FileTree.Folder name="packages">
    <FileTree.Folder name="react">
      <FileTree.File name="package.json" />
      <FileTree.File name="src/index.ts" />
    </FileTree.Folder>
    <FileTree.Folder name="core">
      <FileTree.File name="package.json" />
    </FileTree.Folder>
  </FileTree.Folder>
  <FileTree.File name="pnpm-workspace.yaml" />
</FileTree>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |

## Accessibility

Renders nested lists of folder/file names for visual structure. It is not a keyboard tree widget — use `Tree` when users need expand/collapse or selection. Prefer clear `name` strings; do not rely on color alone to distinguish folders from files.