Path Breadcrumb

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

src
components
beste
button.tsx

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

Import & use
import { Editor3 } from "@/components/beste/piece/editor3";

<Editor3
  crumbs={[
    {
      "label": "src",
      "kind": "folder"
    },
    {
      "label": "components",
      "kind": "folder"
    },
    {
      "label": "beste",
      "kind": "folder"
    },
    {
      "label": "button.tsx",
      "kind": "file"
    }
  ]}
/>

More Editor pieces

View all Editor

File Tree

editor5

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

Your page looks empty

Start by adding your first block.

Empty Page

editor47

Centered editor placeholder with a soft icon tile, headline, hint line, and a recolorable call-to-action pill.

function greet(name: string)

Code Lens

editor22

Action row above a function signature showing references, implementations, and inline commands.

onboarding3/12
activation

Two-row editor find bar with match counter, case/regex toggles, prev/next, replace, and replace-all.

index.tsx
button.tsx
card.tsx
theme.css

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

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.