Selection Counter

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

Ship production-ready components in a weekend.

27 chars·3 words

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

Import & use

import { Editor19 } from "@/components/beste/piece/editor19";

<Editor19
  prefix="Ship "
  selected="production-ready components"
  suffix=" in a weekend."
  chars={27}
  words={3}
/>

More Editor pieces

View all Editor

3 cursors

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

Multi Cursor

editor16

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

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.

1--primary:  #f43f5e;
2--accent:  #8b5cf6;
3--surface:  #0ea5e9;

Color Preview

editor26

CSS lines with inline color swatch squares next to each hex value.

button.tsxSaved 3s ago

Save Indicator

editor23

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

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.tsx

12 export function Button({ label }) {
13−  return <button>{label}</button>;
+  return <button className="btn">{label}</button>;
14 }

Diff View

editor4

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