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
Split Milestone Changelog
Two-column release entries pairing milestone context with highlights and metrics.
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.
categorized-release-notes
Categorized Release Notes
Per-release changes grouped into Added, Changed, and Fixed sub-sections.
featured-release-changelog
Featured Release Changelog
The latest release highlighted in a large featured card, older releases condensed below.