Selection Counter

About this piece

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

Usage

The import and the props worth knowing about, in one place.

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

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

More Editor pieces

View all Editor

const name = 'Hania';
const role = 'design';
const team = 'core';

return greet(name);

Hania

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

button.tsxSaved

button.tsx

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

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