Editor Tab Bar

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

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

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

Import & use
import { Editor6 } from "@/components/beste/piece/editor6";

<Editor6
  tabs={[
    {
      "filename": "index.tsx"
    },
    {
      "filename": "button.tsx",
      "active": true,
      "dirty": true
    },
    {
      "filename": "card.tsx"
    },
    {
      "filename": "theme.css"
    }
  ]}
/>

More Editor pieces

View all Editor
for (let $1:i = 0; $1 < $2:arr.length; $1++) {}
Tab throughTab

Snippet Placeholders

editor15

Code template with dashed-outline tab stops. Active placeholder tints primary, others stay muted.

1function·greet(name)·{
2→return·`Hello,·${name}!`;
3}

Whitespace Markers

editor44

Code lines with muted middle-dots for spaces and → glyphs for tabs, revealing indentation.

button.tsxSaved 3s ago

Save Indicator

editor23

Pill with filename and a state glyph: emerald check for saved, sky dot for dirty.

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.

File Tree

editor5

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

Feature177 Content#feature177
Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

Content Panel

editor46

Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.