Staaarter

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.

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 button dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/changelog-release-feed.json

Prefer 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

PropTypeDefaultDescription
headingstring"Release notes"Section heading.
descriptionstringnoneSection intro text.
releasesFeedRelease[]noneRelease cards, rendered in array order.
classNamestringnoneExtra 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.