Collab Cursor

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

return greet(name);

Ayşe

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

Import & use

import { Editor13 } from "@/components/beste/piece/editor13";

<Editor13
  name="Ayşe"
  code="  return greet(name);"
  tone="rose"
/>

More Editor pieces

3 cursors

const name = 'Ayşe';
const role = 'design';
const team = 'core';

editor16

Stacked code lines each with a primary-tinted blinking caret at the same column plus a header count.

const total = items.reduce(sum, i) => sum + i.price);

Expected 2 arguments, but got 1.ts(2554)

editor14

Code line with a rose wavy underline on the offending token above an alert card with message and source code.

AI Suggestion

const greet = (name: string) => `Hello, ${name}!`;

editor8

AI Suggestion caption above a code line with a solid prefix, italic muted ghost text, and a blinking caret.

for (let $1:i = 0; $1 < $2:arr.length; $1++) {}

Tab throughTab

editor15

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

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

editor44

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

format

editor9

Command palette card with a search bar, ranked results, hint captions, and kbd shortcut pills.