VibeUI

Code Block

Diff Lines

A file diff: added and removed lines are marked by a sign in a pseudo-element as well as a tint, so the meaning survives without colour.

  • code
  • diff
  • review
  • changes

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/codeblock-005?lang=en

components/price.tsx+2 добавлено−1 удалено
export function Price({ value }) {  const label = value + ' руб.'  const label = format(value)  const hint = 'без НДС'  return <span>{label}</span>}
Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "codeblock-005" (Diff Lines) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/codeblock-005.json

Registry item: https://vibeui.ru/r/codeblock-005.json
Installs to: components/vibeui/codeblock-005.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A file diff: added and removed lines are marked by a sign in a pseudo-element as well as a tint, so the meaning survives without colour.

A diff with added and removed lines: a plus or minus sign in a pseudo-element, a tinted row and counters in the header. Zero dependencies, no client JS.

## 3. How to use it
import { Codeblock005 } from "@/components/vibeui/codeblock-005"

<Codeblock005
  path="components/price.tsx"
  showStats={true}
/>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-codeblock-005-* palette — do not swap it for your theme tokens
- the sign next to the colour: a tint alone is unreadable for colour blindness and in print
- the sign in ::before rather than in the text — otherwise plus and minus land in the clipboard
- counting the stats from the same data as the rows: hand-typed numbers drift away from the diff
- the translucent row tint: a solid colour swallows the syntax highlighting
- the dark block background — light monospaced text is unreadable without it

## 6. You may change
- the diff rows through the lines array with its kind field
- the file path through path
- the counters through showStats
- the added and removed hues to match your palette

## 7. Rules
- This is a unified diff: two columns need a different layout and a different data shape.
- Line numbers are deliberately absent — in a diff they come in pairs and confuse more than they help.
- Copying takes both added and removed lines: filtering them stays a manual job.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/codeblock-005.json
https://vibeui.ru/r/codeblock-005.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-codeblock-005-*. Серверный: хуков нет. Строка приходит объектом с полем kind (add, del или ничего); знак печатает ::before, поэтому он не попадает в скопированный фрагмент, а подложка задаётся полупрозрачным цветом поверх фона блока. Счётчики добавленных и удалённых строк считаются из тех же данных, что и разметка, поэтому не могут разойтись с содержимым.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Codeblock005Line = {
  text: string
  kind?: "add" | "del"
}

export type Codeblock005Props = Omit<
  ComponentPropsWithoutRef<"figure">,
  "children"
> & {
  path?: string
  showStats?: boolean
  lines?: Codeblock005Line[]
}

// Идея компонента: диф, который читается и без цвета. Знак «+» или «−»
// рисуется псевдоэлементом рядом с каждой строкой, поэтому смысл строки
// понятен при дальтонизме и в чёрно-белой печати, а в буфер он не попадает.
const STYLES = `
:where([data-vibeui-block="codeblock-005"]){
--vibeui-codeblock-005-bg:oklch(0.2 0.01 265);
--vibeui-codeblock-005-head:oklch(0.24 0.012 265);
--vibeui-codeblock-005-fg:oklch(0.92 0.006 265);
--vibeui-codeblock-005-muted:oklch(0.67 0.014 265);
--vibeui-codeblock-005-border:oklch(1 0 0 / 13%);
--vibeui-codeblock-005-add:oklch(0.84 0.15 150);
--vibeui-codeblock-005-add-bg:oklch(0.5 0.13 150 / 22%);
--vibeui-codeblock-005-del:oklch(0.79 0.15 22);
--vibeui-codeblock-005-del-bg:oklch(0.5 0.15 22 / 22%);
--vibeui-codeblock-005-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--vibeui-codeblock-005-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="codeblock-005"]{
display:flex;flex-direction:column;
width:100%;max-width:34rem;box-sizing:border-box;margin:0;overflow:hidden;
border:1px solid var(--vibeui-codeblock-005-border);border-radius:0.75rem;
background:var(--vibeui-codeblock-005-bg);color:var(--vibeui-codeblock-005-fg);
font-family:var(--vibeui-codeblock-005-font);
}
[data-vibeui-block="codeblock-005"] figcaption{
display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
padding:0.5rem 0.875rem;
background:var(--vibeui-codeblock-005-head);
border-bottom:1px solid var(--vibeui-codeblock-005-border);
font-size:0.75rem;color:var(--vibeui-codeblock-005-muted);
}
[data-vibeui-block="codeblock-005"] [data-part="path"]{font-family:var(--vibeui-codeblock-005-mono)}
[data-vibeui-block="codeblock-005"] [data-part="stats"]{display:flex;gap:0.625rem;font-variant-numeric:tabular-nums}
[data-vibeui-block="codeblock-005"] [data-part="stats"] b{font-weight:700}
[data-vibeui-block="codeblock-005"] [data-part="stats"] [data-kind="add"]{color:var(--vibeui-codeblock-005-add)}
[data-vibeui-block="codeblock-005"] [data-part="stats"] [data-kind="del"]{color:var(--vibeui-codeblock-005-del)}
[data-vibeui-block="codeblock-005"] pre{margin:0;padding:0.5rem 0;overflow-x:auto}
[data-vibeui-block="codeblock-005"] code{
display:block;min-width:max-content;
font-family:var(--vibeui-codeblock-005-mono);
font-size:0.8125rem;line-height:1.65;white-space:pre;
}
[data-vibeui-block="codeblock-005"] [data-part="row"]{
display:block;padding:0 0.875rem 0 2rem;position:relative;
}
/* Знак строки — не текст: он объясняет диф без опоры на цвет. */
[data-vibeui-block="codeblock-005"] [data-part="row"]::before{
content:" ";position:absolute;left:0.75rem;
color:var(--vibeui-codeblock-005-muted);
user-select:none;-webkit-user-select:none;
}
[data-vibeui-block="codeblock-005"] [data-part="row"][data-kind="add"]{background:var(--vibeui-codeblock-005-add-bg)}
[data-vibeui-block="codeblock-005"] [data-part="row"][data-kind="add"]::before{content:"+";color:var(--vibeui-codeblock-005-add);font-weight:700}
[data-vibeui-block="codeblock-005"] [data-part="row"][data-kind="del"]{background:var(--vibeui-codeblock-005-del-bg)}
[data-vibeui-block="codeblock-005"] [data-part="row"][data-kind="del"]::before{content:"−";color:var(--vibeui-codeblock-005-del);font-weight:700}
[data-vibeui-block="codeblock-005"] [data-part="row"][data-kind="del"] span{opacity:.85}
`

const LINES: Codeblock005Line[] = [
  { text: "export function Price({ value }) {" },
  { text: "  const label = value + ' руб.'", kind: "del" },
  { text: "  const label = format(value)", kind: "add" },
  { text: "  const hint = 'без НДС'", kind: "add" },
  { text: "  return <span>{label}</span>" },
  { text: "}" },
]

/** Диф файла: добавленные и удалённые строки со знаком и подложкой. */
export function Codeblock005({
  path = "components/price.tsx",
  showStats = true,
  lines = LINES,
  className,
  style,
  ...props
}: Codeblock005Props) {
  const added = lines.filter((line) => line.kind === "add").length
  const deleted = lines.filter((line) => line.kind === "del").length

  return (
    <>
      <style href="vibeui-codeblock-005" precedence="medium">
        {STYLES}
      </style>
      <figure
        {...props}
        data-vibeui-block="codeblock-005"
        className={className}
        style={style as CSSProperties}
      >
        <figcaption>
          <span data-part="path">{path}</span>
          {showStats ? (
            <span data-part="stats">
              <span data-kind="add">
                <b>+{added}</b> добавлено
              </span>
              <span data-kind="del">
                <b>−{deleted}</b> удалено
              </span>
            </span>
          ) : null}
        </figcaption>
        <pre>
          <code>
            {lines.map((line, index) => (
              <span
                key={index}
                data-part="row"
                data-kind={line.kind}
                aria-label={
                  line.kind === "add"
                    ? "добавлено"
                    : line.kind === "del"
                      ? "удалено"
                      : undefined
                }
              >
                <span>{line.text}</span>
              </span>
            ))}
          </code>
        </pre>
      </figure>
    </>
  )
}