Diff Block

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

Diff Block

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

Usage

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

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": "}"
    }
  ]}
  bordered={false}
/>

More Terminal pieces

View all Terminal
$npx beste-ui@latest init

okServer ready
infoCompiled /dashboard
warnSlow query
errorFailed to reach cache
Installing packages
pnpm dlx shadcn@latest add button
Installing dependencies72%