Branch Switcher

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

Switch branch…
  • feat/onboarding
  • main
  • feat/ai-suggest↑3
  • chore/cleanup

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

Import & use
import { Editor24 } from "@/components/beste/piece/editor24";

<Editor24
  current="feat/onboarding"
  branches={[
    {
      "name": "feat/onboarding",
      "current": true
    },
    {
      "name": "main"
    },
    {
      "name": "feat/ai-suggest",
      "ahead": 3
    },
    {
      "name": "chore/cleanup"
    }
  ]}
/>

More Editor pieces

View all Editor
Theme

Theme Switcher

editor35

Settings card with a segmented light / dark / system toggle and icon plus label per option.

File Tree

editor5

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

import { greet } from './greet';
 
const user = { name: 'Ayşe' };
const msg = greet(user.name);
console.log(msg);
 

Git Gutter

editor30

Code lines with colored gutter stripes showing added (emerald), modified (sky), and removed (rose) lines.

user.
  • idstring
  • namestring
  • emailstring
  • isAdminboolean
  • save(): Promise<void>

IntelliSense

editor2

Autocomplete popup with a blinking caret up top and a dropdown listing kind-colored tiles, names, and type signatures.

onboarding3/12
activation

Find & Replace

editor11

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

<<<<<<< CurrentHEAD
const greet = (name) =>  `Hi, ${name}!`;
=======
const greet = (name: string) =>  `Merhaba, ${name}!`;
>>>>>>> Incomingfeat/onboarding

Merge Conflict

editor31

Classic conflict block with emerald current section, sky incoming section, and <<< === >>> markers.