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
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.
Categorized Release Notes
Per-release changes grouped into Added, Changed, and Fixed sub-sections.