Changelog Release Feed
A feed of bordered release cards, each with a version, date, short summary, and a list of changes with an aligned, uppercase type label (Added, Changed, Fixed, Removed) before each line. Cards can optionally include a CTA button linking out to full release notes.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/changelog-release-feed.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/changelog/changelog3.tsx instead.
Usage
The file also exports changelog3Demo, 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 { Changelog3, changelog3Demo } from "@/components/blocks/changelog/changelog3"; export default function Page() { return <Changelog3 {...changelog3Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Release notes" | Section heading. |
| description | string | none | Section intro text. |
| releases | FeedRelease[] | none | Release cards, rendered in array order. |
| className | string | none | Extra classes for the outer section element. |
Types
type ChangeType = "added" | "changed" | "fixed" | "removed"; type ChangeLine = { type: ChangeType; text: string }; type FeedRelease = { version: string; date: string; summary: string; changes: ChangeLine[]; cta?: { label: string; href: string }; };
Behavior notes
- Change-type labels are plain uppercase text in a fixed-width column (w-16), not colored badges, matching this block's flatter card style; the tone-coded Badge convention used elsewhere in the changelog category is intentionally not applied here.
- date is a plain display string set by the caller, never computed at render time.
- cta is optional per release; when omitted the card ends after the change list with no empty footer space.
- The CTA button is decorative: it renders through Button's render={<Link/>} prop and does not submit or fetch anything, since there is no real release-notes backend behind this demo.
More Changelog Blocks
View all →Split Milestone Changelog
Two-column release entries pairing milestone context with highlights and metrics.
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.
Categorized Release Notes
Per-release changes grouped into Added, Changed, and Fixed sub-sections.
Featured Release Changelog
The latest release highlighted in a large featured card, older releases condensed below.