Multi Cursor

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

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

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

Import & use
import { Editor16 } from "@/components/beste/piece/editor16";

<Editor16
  prefix="const "
  lines={[
    "name = 'Ayşe';",
    "role = 'design';",
    "team = 'core';"
  ]}
/>

More Editor pieces

View all Editor
return greet(name);
Ayşe

Collab Cursor

editor13

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

Ship production-ready components in a weekend.
27 chars·3 words

Selection Counter

editor19

Text with a primary-tinted highlight and a floating dark pill showing character and word counts.

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.

button.tsx
export function Button({ label }) {
  return <button>{label}</button>;
  return <button className="btn">{label}</button>;
}

Diff View

editor4

Unified diff with tinted add and remove rows, line numbers, and +/− prefix column.

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.

Go to line142
of 386

Goto Line

editor36

Compact jump-to-line input with a typed value, a blinking caret, and the total line count.