Componentdata0.79 KB gzipZero dependencies

Changelog Entry

Version badge with change rows.

Preview

Live Preview

v2.4.02026-08-30

addedSplit-flap board controls
fixedTurnstile counter drift
breakingRenamed gate prop

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add changelog-entry

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { ChangelogEntry } from "@/components/ui/changelog-entry";

<ChangelogEntry />

Usage guidance

Use Changelog Entry when a ticket stub surface needs Version badge with change rows. Keep props minimal and prefer composition with sibling stubs.

Avoid Changelog Entry for long form flows or dense data grids where a dedicated layout block fits better.

Source code

changelog-entry.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface ChangelogChange {
  tone: "added" | "fixed" | "breaking";
  text: string;
}

export interface ChangelogEntryProps extends React.HTMLAttributes<HTMLDivElement> {
  version?: string;
  date?: string;
  changes?: ChangelogChange[];
}

/** Changelog entry: version badge with tone-coded change rows. */
export function ChangelogEntry({
  version = "v2.4.0",
  date = "2026-08-30",
  changes = [
    { tone: "added", text: "Split-flap board controls" },
    { tone: "fixed", text: "Turnstile counter drift" },
    { tone: "breaking", text: "Renamed gate prop" },
  ],
  className,
  ...props
}: ChangelogEntryProps) {
  const toneCls: Record<ChangelogChange["tone"], string> = {
    added: "bg-primary/10 text-foreground border-primary/40",
    fixed: "bg-secondary text-secondary-foreground border-border",
    breaking: "bg-accent/10 text-accent border-accent/50",
  };
  return (
    <div className={cn("w-full max-w-sm rounded-lg border-2 border-foreground bg-card p-4", className)} {...props}>
      <div className="flex items-center justify-between">
        <span className="rounded bg-primary px-2 py-0.5 font-mono text-xs font-black text-primary-foreground">{version}</span>
        <span className="font-mono text-[11px] tabular-nums text-muted-foreground">{date}</span>
      </div>
      <ul className="mt-3 space-y-1.5">
        {changes.map((c, i) => (
          <li key={i} className="flex items-start gap-2 text-xs">
            <span className={cn("rounded border px-1.5 py-0.5 font-mono text-[10px] font-bold uppercase", toneCls[c.tone])}>
              {c.tone}
            </span>
            <span className="pt-0.5">{c.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}