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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Release notes" | Page heading above the release list. |
| description | string | "Every change, grouped by category." | Supporting copy under the heading. |
| releases | ReleaseNote[] | none | Releases to render, most recent first. |
| className | string | none | Extra 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.
More Changelog Blocks
View all →split-milestone-changelog
Split Milestone Changelog
Two-column release entries pairing milestone context with highlights and metrics.
changelog-release-feed
Changelog Release Feed
Release feed cards with aligned change-type labels and an optional CTA per card.
grouped-changelog-board
Grouped Changelog Board
Releases grouped under bold month headings with aligned version and description columns.
milestone-changelog-timeline
Milestone Changelog Timeline
Vertical timeline of releases with a connecting line, version badges, and tone-coded change types.
minimal-text-changelog
Minimal Text Changelog
Ultra-plain, text-only changelog with no badges, cards, or borders.
featured-release-changelog
Featured Release Changelog
The latest release highlighted in a large featured card, older releases condensed below.