VibeUI

Code Block

Version Stamp

A code sample with a shelf life: the version and the check date sit in the header, and a stale flag repaints the stamp and rewrites the footer note.

  • code
  • version
  • date
  • freshness

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-020?lang=en

v2.4.0next@16
import { defineConfig } from "vibeui/config"

export default defineConfig({
  registry: "https://vibeui.dev/r",
  style: "base-nova",
})

Пример проверен на v2.4.0 и next@16.

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-020" (Version Stamp) 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-020.json

Registry item: https://vibeui.ru/r/codeblock-020.json
Installs to: components/vibeui/codeblock-020.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 code sample with a shelf life: the version and the check date sit in the header, and a stale flag repaints the stamp and rewrites the footer note.

A code block with a version stamp, a check date and a freshness note: going stale repaints the stamp and changes the text. Zero dependencies, no client JS.

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

<Codeblock020
  version="v2.4.0"
  date="2026-08-14"
  dateLabel="14 August 2026"
  runtime="next@16"
  stale={false}
/>

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-020-* palette — do not swap it for your theme tokens
- one source of state: both the stamp and the note are painted by stale, or the block lies
- the machine-readable dateTime on the time element — a visible date alone is useless to parsers
- the date next to the version: a version without a date says nothing about how old the check is
- the footer note: the stamp colour alone does not tell the reader what to do
- the dark surface of the block — light monospaced text is unreadable without it

## 6. You may change
- the sample code through code
- the version through version
- the date through date and its caption through dateLabel
- the stale flag through stale and the runtime through runtime

## 7. Rules
- dateLabel is not derived from date: the human date is set separately to avoid dragging in locales.
- The component never compares dates itself — stale is set by the caller who knows the releases.
- The stamp is sized for a short version: a long string such as a commit hash breaks the header.
- 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-020.json
https://vibeui.ru/r/codeblock-020.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-codeblock-020-*. Серверный: хуков нет. Признак stale живёт на корне как data-атрибут, и от него зависят и цвет штампа, и значок в подвале, и текст подписи — рассинхронизировать их нельзя. Дата выводится тегом time с машиночитаемым dateTime, поэтому её понимают и парсеры, и читалки экрана. Штамп версии сделан значком с точкой в псевдоэлементе, а окружение вынесено вправо моноширинной подписью.

Component source

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

import type { CSSProperties } from "react"

export type Codeblock020Props = {
  version?: string
  date?: string
  dateLabel?: string
  runtime?: string
  stale?: boolean
  code?: string
  className?: string
  style?: CSSProperties
}

// Идея компонента: у примера кода есть срок годности. Версия и дата стоят в
// шапке рядом с кодом, а признак устаревания перекрашивает штамп и меняет
// подпись в подвале — читатель сразу видит, можно ли этому примеру верить.
const STYLES = `
:where([data-vibeui-block="codeblock-020"]){
--vibeui-codeblock-020-bg:oklch(0.2 0.014 250);
--vibeui-codeblock-020-head:oklch(0.24 0.018 250);
--vibeui-codeblock-020-fg:oklch(0.93 0.008 250);
--vibeui-codeblock-020-muted:oklch(0.67 0.016 250);
--vibeui-codeblock-020-border:oklch(1 0 0 / 12%);
--vibeui-codeblock-020-fresh:oklch(0.83 0.14 152);
--vibeui-codeblock-020-fresh-bg:oklch(0.5 0.13 152 / 22%);
--vibeui-codeblock-020-stale:oklch(0.84 0.14 75);
--vibeui-codeblock-020-stale-bg:oklch(0.55 0.13 75 / 22%);
--vibeui-codeblock-020-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--vibeui-codeblock-020-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="codeblock-020"]{
display:flex;flex-direction:column;
width:100%;max-width:32rem;box-sizing:border-box;margin:0;overflow:hidden;
border:1px solid var(--vibeui-codeblock-020-border);border-radius:0.75rem;
background:var(--vibeui-codeblock-020-bg);color:var(--vibeui-codeblock-020-fg);
font-family:var(--vibeui-codeblock-020-font);
}
[data-vibeui-block="codeblock-020"] [data-part="head"]{
display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
padding:0.5rem 0.75rem;
background:var(--vibeui-codeblock-020-head);
border-bottom:1px solid var(--vibeui-codeblock-020-border);
font-size:0.75rem;color:var(--vibeui-codeblock-020-muted);
}
/* Штамп версии красится тем же признаком, что и подпись в подвале: два
   источника правды разъехались бы, и блок соврал бы про актуальность. */
[data-vibeui-block="codeblock-020"] [data-part="version"]{
display:inline-flex;align-items:center;gap:0.375rem;
padding:0.1875rem 0.5rem;border-radius:999px;
font-family:var(--vibeui-codeblock-020-mono);font-size:0.6875rem;font-weight:700;
background:var(--vibeui-codeblock-020-fresh-bg);
color:var(--vibeui-codeblock-020-fresh);
}
[data-vibeui-block="codeblock-020"] [data-part="version"]::before{
content:"";width:0.4375rem;height:0.4375rem;border-radius:50%;background:currentColor;
}
[data-vibeui-block="codeblock-020"] time{
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="codeblock-020"] [data-part="runtime"]{
margin-inline-start:auto;font-family:var(--vibeui-codeblock-020-mono);
}
[data-vibeui-block="codeblock-020"] pre{margin:0;padding:0.875rem;overflow-x:auto}
[data-vibeui-block="codeblock-020"] code{
display:block;min-width:max-content;
font-family:var(--vibeui-codeblock-020-mono);
font-size:0.8125rem;line-height:1.65;white-space:pre;
}
[data-vibeui-block="codeblock-020"] [data-part="foot"]{
display:flex;align-items:center;gap:0.5rem;margin:0;
padding:0.5rem 0.75rem;
border-top:1px solid var(--vibeui-codeblock-020-border);
background:var(--vibeui-codeblock-020-head);
font-size:0.6875rem;line-height:1.4;color:var(--vibeui-codeblock-020-muted);
}
[data-vibeui-block="codeblock-020"] [data-part="foot"]::before{
content:"✓";flex:none;color:var(--vibeui-codeblock-020-fresh);font-weight:700;
}
[data-vibeui-block="codeblock-020"][data-stale="true"] [data-part="version"]{
background:var(--vibeui-codeblock-020-stale-bg);
color:var(--vibeui-codeblock-020-stale);
}
[data-vibeui-block="codeblock-020"][data-stale="true"] [data-part="foot"]::before{
content:"!";color:var(--vibeui-codeblock-020-stale);
}
`

const CODE = `import { defineConfig } from "vibeui/config"

export default defineConfig({
  registry: "https://vibeui.dev/r",
  style: "base-nova",
})`

/** Блок кода со штампом версии и датой проверки примера. */
export function Codeblock020({
  version = "v2.4.0",
  date = "2026-08-14",
  dateLabel = "14 августа 2026",
  runtime = "next@16",
  stale = false,
  code = CODE,
  className,
  style,
}: Codeblock020Props) {
  return (
    <>
      <style href="vibeui-codeblock-020" precedence="medium">
        {STYLES}
      </style>
      <figure
        data-vibeui-block="codeblock-020"
        data-stale={stale || undefined}
        className={className}
        style={style}
      >
        <figcaption data-part="head">
          <span data-part="version">{version}</span>
          <time dateTime={date}>{dateLabel}</time>
          <span data-part="runtime">{runtime}</span>
        </figcaption>
        <pre>
          <code>{code}</code>
        </pre>
        <p data-part="foot">
          {stale
            ? `Пример писали для ${version}: с тех пор вышли новые версии — сверьтесь с документацией.`
            : `Пример проверен на ${version} и ${runtime}.`}
        </p>
      </figure>
    </>
  )
}