Staaarter

Categorized Release Notes

Changelog with each release broken into optional Added, Changed, and Fixed sub-groups, each under its own color-coded category label, so a release's changes read as organized groups rather than one flat list.

By Staaarter Team
Changelog
Docs
Live preview

Docs

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.

npx shadcn add https://staaarter.com/r/categorized-release-notes.json

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

Usage

The file also exports changelog7Demo, 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 { Changelog7, changelog7Demo } from "@/components/blocks/changelog/changelog7";

export default function Page() {
  return <Changelog7 {...changelog7Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Release notes"Page heading above the release list.
descriptionstring"Every change, grouped by category."Supporting copy under the heading.
releasesReleaseNote[]noneReleases to render, most recent first.
classNamestringnoneExtra classes for the outer section element.

Types

interface ReleaseNote {
  version: string;
  date: string;
  title?: string;
  description?: string;
  added?: string[];
  changed?: string[];
  fixed?: string[];
}

Behavior notes

  • Each of the added/changed/fixed sub-groups only renders its label and list when that release's array is non-empty for that release, so a release with only fixes shows just a Fixed group.
  • The category label uses this category's badge convention: Added is `variant="default"`, Changed is `variant="secondary"`, Fixed is `variant="outline"`, consistent with every other block in this category.
  • Fully static: no submit actions, links, or client-side state anywhere in the block.