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"
    }
  ]}
/>

More Editor pieces

View all Editor

src

components

beste

button.tsx

Path Breadcrumb

editor3

Path row with folder or file icons, chevron separators, and a bold final crumb.

index.tsx

button.tsx

card.tsx

theme.css

Editor Tab Bar

editor6

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

greet.ts

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

Code Window

editor1

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

Zen Modemanifesto.md

Exit⌘+K+Z

Zen Mode

editor32

Minimal focus card with a focus icon, current filename, and an exit-shortcut reminder.

Switch branch…

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

Branch Switcher

editor24

Branch picker popover with search, a list of branches, ahead counts, and an emerald check on the current one.

Keybindings

Command palette
⌘+K
Quick open
⌘+P
Toggle terminal
⌃+`
Format document
⌥+⇧+F

Keymap List

editor37

Panel listing editor actions with their kbd shortcut combinations on the right.