Staaarter

Two-Column Date Changelog

Minimal changelog laid out as divided two-column rows, a fixed-width date column on the left and the version heading with a plain change list on the right, repeated down the page with no cards, badges, or extra chrome.

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

npx shadcn add https://staaarter.com/r/two-column-date-changelog.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/changelog/changelog11.tsx instead.

Usage

The file also exports changelog11Demo, 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 { Changelog11, changelog11Demo } from "@/components/blocks/changelog/changelog11";

export default function Page() {
  return <Changelog11 {...changelog11Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Changelog"Page heading above the rows.
releasesDateRelease[]noneReleases to render as rows, most recent first.
classNamestringnoneExtra classes for the outer section element.

Types

interface DateRelease {
  version: string;
  date: string;
  changes: string[];
}

Behavior notes

  • Deliberately has no tags or badges to keep the minimal two-column brief honest; the version heading and dash-bulleted change list are the only visual elements in the right column.
  • The date column is a fixed `w-28` so dates of varying length still align the version/changes column consistently across rows.
  • Fully static: no client-side state, links, or interactive elements anywhere in the block.