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
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.