Diff Block

Unified diff with added and removed lines tinted green and red.

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

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

Import & use
import { Terminal9 } from "@/components/beste/piece/terminal9";

<Terminal9
  filename="components/Button.tsx"
  lines={[
    {
      "type": "context",
      "text": "function Button({ label }) {"
    },
    {
      "type": "remove",
      "text": "  return <button>{label}</button>;"
    },
    {
      "type": "add",
      "text": "  return <button className=\"btn\">{label}</button>;"
    },
    {
      "type": "context",
      "text": "}"
    }
  ]}
/>

More Terminal pieces

View all Terminal
$npx beste-ui@latest init

Terminal Prompt

terminal1

Dark shell line with an emerald prompt, command text, and a blinking block cursor.

Installing packagesctrl-c to cancel

Loading Line

terminal10

Single indeterminate line with a spinner and a cancel hint.

pnpm dlx shadcn@latest add button

Copy Command

terminal2

CLI code line with a chevron prefix and a copy button that flips to a check.

npx sirius-cli@latest init

✓ Workspace ready. Open the dashboard to invite your team.

CLI Command Card

terminal13

A dark terminal card with traffic-light dots, a prompted command, and a success output line.

12:04:01OKServer ready on port 3000
12:04:03INFOCompiled /dashboard in 240ms
12:04:06WARNSlow query took 412ms
12:04:09ERRFailed to reach cache

Log Stream

terminal7

Timestamped log lines tagged by level in info, warn, error, and ok colors.

Installing dependencies72%

Progress Bar

terminal5

Monospace install line with a segmented progress meter and percentage.