Path Breadcrumb

src
components
beste
button.tsx
About this piece

Path Breadcrumb

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

Usage

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

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

<Editor3
  surface="card"
  bordered={true}
  inverted={false}
  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

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

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

function greet(name: string)

Code Lens

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

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
// Ship it

Code Window

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

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Outline Panel

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

12function renderChart(data) {
37}

Code Folding

Expanded open line, a collapsed region button with chevron and line count, and the closing line.