Developer Changelog with Code

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/changelog/changelog19.tsx instead.

Usage

The file also exports changelog19Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Changelog19, changelog19Demo } from "@/components/blocks/changelog/changelog19";

export default function Page() {
  return <Changelog19 {...changelog19Demo} />;
}

Props

Types

type Changelog19ChangeType = "added" | "changed" | "fixed" | "removed";

type Changelog19Change = {
  type: Changelog19ChangeType;
  text: string;
};

type Changelog19Release = {
  id: string;
  version: string;
  date: string;
  heading?: string;
  description: string;
  codeLabel?: string;
  code?: string;
  changes: Changelog19Change[];
};

Behavior notes

• Purely presentational: no interactive state or backend calls. The code sample is a static hardcoded string per release, not fetched or executed.
• Code is rendered as plain monospace text in a <pre><code> block, not syntax-highlighted; no highlighting library is used or needed.
• The code block's container scrolls horizontally on its own (overflow-x-auto) rather than letting a long line widen or break the page layout, matching the repo's table/code horizontal-scroll convention.
• code and codeLabel are both optional per release; a release with neither renders as a plain prose-and-change-list entry with no code block at all.
• Change type uses the shared badge mapping: added is default, changed is secondary, fixed is outline, removed is destructive.