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
Two-column release entries pairing milestone context with highlights and metrics.
Changelog Release Feed
Release feed cards with aligned change-type labels and an optional CTA per card.
Grouped Changelog Board
Releases grouped under bold month headings with aligned version and description columns.
Milestone Changelog Timeline
Vertical timeline of releases with a connecting line, version badges, and tone-coded change types.
Minimal Text Changelog
Ultra-plain, text-only changelog with no badges, cards, or borders.
Featured Release Changelog
The latest release highlighted in a large featured card, older releases condensed below.