121 Pro components and page blocks

Get Pro
uibrik

Updated

Prompt Versions

Pro

Preview

Customize

Changes
Color

Installation

Pro

Prompt Versions is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/prompt-versions

Usage

import { PromptVersions } from "@/components/uibrik/prompt-versions/prompt-versions";​const versions = [  { id: "v1", label: "v1", note: "First draft", author: "Maya Chen", date: "Oct 2", prompt: V1, score: 61.4, tokens: 212, latency: 1840, cost: 0.0042 },  { id: "v2", label: "v2", note: "Friendlier tone", author: "Maya Chen", date: "Oct 9", prompt: V2, score: 68.9, tokens: 188, latency: 1710, cost: 0.0038 },  // …3 more];​<PromptVersions  versions={versions}  defaultView="changes"  color="#5b7bd6"  onRestore={(version) => {}}  // value="…"  // defaultValue="…"  // onValueChange={(id) => {}}  // diffWords={[(a, b) => {}]}/>

Where to use Prompt Versions

  • Prompt management tools

    Each version sits on its eval score, so teams see which edit helped and can restore it in one click.

    Pairs with Code Block

  • LLM evaluation dashboards

    Score, tokens, latency and cost deltas next to the diff tie every metric change to the words that caused it.

    Pairs with Benchmark Race and KPI Tile

  • AI feature settings

    Users editing a system prompt get a readable history of what changed, by whom and when.

    Pairs with Settings Page

Props

PromptVersions
defaultView
Type "changes" | "full"
"changes"
Open on the diff or the full prompt.
color
Type string
"#5b7bd6"
Colour of the score line and marker.
versionsrequired
Type { id; label; note?; author?; date?; prompt; score; tokens?; latency?: ms; cost?: USD }[]
–
Oldest first. The last is the current version.
value / defaultValue / onValueChange
Type string / string / (id) => void
–
Selected version id. Defaults to the latest.
onRestore
Type (version) => void
–
Shows a Restore button on older versions.
diffWords
Type (a, b) => DiffPart[]
–
Exported word diff (LCS), if you want to render changes elsewhere.
className
Type string
–
Classes for the card.