Find & Replace

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

onboarding3/12

activation

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

Import & use

import { Editor11 } from "@/components/beste/piece/editor11";

<Editor11
  query="onboarding"
  replace="activation"
  current={3}
  total={12}
/>

More Editor pieces

/\b\w+@\w+\.com\b/gi

editor21

Regex input with slashes, violet flags, and a tabular match-count pill on the right.

1function render(items) {
2  items.forEach(draw);
3}
Matching bracket on line 3

editor27

Three-line snippet with the matching opening and closing brackets highlighted in primary.

button.tsx

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

editor4

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

index.tsx

button.tsx

card.tsx

theme.css

editor6

Row of filename tabs with active styling. Dirty tabs show a sky dot in place of the close button.

Feature177 Content#feature177

Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

editor46

Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.

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

editor26

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