Release Card Grid
Changelog laid out as a responsive card grid, one card per release with a version badge and description; a release can optionally include a link to its full release notes, so some cards show a link and some don't.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/release-card-grid.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/changelog/changelog9.tsx instead.
Usage
The file also exports changelog9Demo, 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 { Changelog9, changelog9Demo } from "@/components/blocks/changelog/changelog9"; export default function Page() { return <Changelog9 {...changelog9Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "What's new" | Page heading above the card grid. |
| description | string | "Recent releases and updates." | Supporting copy under the heading. |
| releases | CardRelease[] | none | Releases to render as cards. |
| className | string | none | Extra classes for the outer section element. |
Types
interface CardRelease { version: string; date: string; description: string; href?: string; }
Behavior notes
- A card's "Read release notes" link only renders when that release has an `href`, proving the optional-link path; cards without one simply end after the description.
- The link is decorative in the demo data (`href: "#"`) since there's no real per-release notes page behind it; wire it up to a real route to make it functional.
- Grid is `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`, so it collapses to a single column on mobile and expands up to three across on larger screens.
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.
categorized-release-notes
Categorized Release Notes
Per-release changes grouped into Added, Changed, and Fixed sub-sections.