File Tree

About this piece

Nested file explorer with folder chevrons and a highlighted active file.

Usage

The import and the props worth knowing about, in one place.

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

<Editor5
  surface="card"
  bordered={false}
  inverted={false}
  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": "lib",
      "depth": 0,
      "kind": "folder"
    }
  ]}
/>

More Editor pieces

View all Editor

src

components

beste

button.tsx

Zen Modemanifesto.md

index.tsx

button.tsx

card.tsx

greet.ts

1export function greet(name: string) {
2  return `Hello, ${name}!`;
3}
4 
5// Ship it

Switch branch…

feat/onboarding
main
feat/ai-suggest
chore/cleanup

format

Format Document
Format Selection
Reveal in File Explorer