Striped Table Changelog
A semantic HTML table listing every change with its version, date, type, and description. Rows alternate background tint for scanability, the type column uses the category's tone-coded badge mapping, and rows with a release-note URL get a small icon-button link.
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/striped-table-changelog.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/changelog/changelog23.tsx instead.
Usage
The file also exports changelog23Demo, 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 { Changelog23, changelog23Demo } from "@/components/blocks/changelog/changelog23"; export default function Page() { return <Changelog23 {...changelog23Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Changelog" | Section heading. |
| description | string | "Every notable change..." | Section subheading. |
| rows | Changelog23Row[] | none | Table rows, one per individual change. |
| className | string | none | Extra classes for the outer section element. |
Types
type Changelog23ChangeType = "added" | "changed" | "fixed" | "removed"; interface Changelog23Row { id: string; version: string; date: string; type: Changelog23ChangeType; description: string; href?: string; }
Behavior notes
- Fully static server component: no client-side state or handlers.
- The table is wrapped in an `overflow-x-auto` container with a `min-w` so it scrolls internally on narrow viewports instead of forcing horizontal page scroll.
- The row link is a real `<Link>` (via Button's `render` prop) to a placeholder anchor href, not a live release-notes page.
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.