File Tree

Nested file explorer with folder chevrons, amber folder icons, and a highlighted active file.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Editor5 } from "@/components/beste/piece/editor5";

<Editor5
  items={[
    {
      "label": "components",
      "depth": 0,
      "kind": "folderOpen"
    },
    {
      "label": "beste",
      "depth": 1,
      "kind": "folderOpen"
    },
    {
      "label": "button.tsx",
      "depth": 2,
      "kind": "file",
      "active": true
    },
    {
      "label": "card.tsx",
      "depth": 2,
      "kind": "file"
    },
    {
      "label": "input.tsx",
      "depth": 2,
      "kind": "file"
    },
    {
      "label": "ui",
      "depth": 1,
      "kind": "folder"
    },
    {
      "label": "lib",
      "depth": 0,
      "kind": "folder"
    }
  ]}
/>