File Tree

Collapsible tree for documenting project structure.

1.1 KB gzipped
Zero dependencies
Reduced-motion safe
Base UI & Radix compatible

- - marquee.tsx
  - dock.tsx
- - button.tsx

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/file-tree.json

Adds components/velora/file-tree.tsx.

Props

Prop	Type	Default
`tree*`	`FileNode[]`	`—`
`className`	`string`	`—`

FileNode

interface FileNode {
  name: string;
  /** Presence of `children` makes the node a folder */
  children?: FileNode[];
  /** Folders start open unless this is false */
  defaultOpen?: boolean;
}

Accessibility

Reduced motion: The chevron snaps between closed and open instead of rotating. Child lists appear and disappear instantly for everyone.
Keyboard: Each folder is a native button: Tab reaches it and Enter or Space toggles it. Files are plain text and not focusable, and there is no arrow-key tree navigation.
Screen readers: Nested lists where folder buttons report aria-expanded (a disclosure pattern, not role=tree).