Visual Release Notes

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, media-slot 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/changelog16.tsx instead.

Usage

The file also exports changelog16Demo, 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 { Changelog16, changelog16Demo } from "@/components/blocks/changelog/changelog16";

export default function Page() {
  return <Changelog16 {...changelog16Demo} />;
}

Props

Types

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

interface Change {
  type: ChangeType;
  label: string;
  text: string;
}

interface Release {
  version: string;
  date: string;
  heading: string;
  description: string;
  image: { src: string; alt: string };
  changes: Change[];
}

Behavior notes

• Alternates which side the image renders on: even-indexed releases show the image first (left on desktop), odd-indexed releases flip to the right, via a deterministic `index % 2` check on the static releases array, not any client state.
• The change tags follow this category's tone convention: added uses Badge variant default, changed uses secondary, fixed uses outline, removed uses destructive; each entry supplies its own display label (e.g. "Breaking", "Security", "Deprecated") so the badge text can vary while the color stays consistent with its type.
• Fully static server component: no filtering, pagination, or client-side state.