Diff Snippet

Compact diff card with added, removed, and context lines tinted in emerald and rose.

function greet(name) {
return 'Hi ' + name;
return `Hello, ${name}!`;
}

New here? Read the installation guide.

Import & use
import { Code4 } from "@/components/beste/piece/code4";

<Code4
  lines={[
    {
      "kind": "context",
      "text": "function greet(name) {"
    },
    {
      "kind": "remove",
      "text": "  return 'Hi ' + name;"
    },
    {
      "kind": "add",
      "text": "  return `Hello, ${name}!`;"
    },
    {
      "kind": "context",
      "text": "}"
    }
  ]}
/>

More Code pieces

View all Code
greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
console.log(greet("Beste"));

Code Snippet Card

Dark editor card with three traffic-light dots, a filename tab, and line-numbered code.

members.ts
import { Sirius } from '@sirius/sdk'
 
const client = new Sirius(apiKey)
await client.members.create({ name })

SDK Snippet Card

A code card with a filename header and copy affordance over syntax-toned, line-numbered source.

const greeting = "Hello, Beste!";ts

Code Line

One-line code snippet with a monospace pill and a tiny language tag on the right.

const user = await fetchUser("42");

Tokenized Line

Single-line snippet with keywords, strings, and function names colored by semantic token kind.

{
"name":"Beste",
"version":"1.0.0",
"active":true,
"count":42,
"owner":null
}

JSON Snippet

Pretty-printed JSON object with sky keys, emerald strings, and amber numerics.

import{useState, useEffect}from"react";
import{Button}from"@/ui/button";
import{cn}from"@/lib/utils";

Import Block

Stacked import statements with destructured names and module paths in a quiet syntax palette.

Markdown version