Staaarter

Terminal Git Log Changelog

Release history rendered like a git log inside a fake terminal window with a three-dot title bar. Each entry shows a commit hash, an optional version tag, and a color-coded prefix (+ added, ~ changed, - fixed/removed). A blinking cursor block sits at the end of the last line.

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/terminal-git-log-changelog.json

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

Usage

The file also exports changelog22Demo, 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 { Changelog22, changelog22Demo } from "@/components/blocks/changelog/changelog22";

export default function Page() {
  return <Changelog22 {...changelog22Demo} />;
}

Props

PropTypeDefaultDescription
windowTitlestring"changelog.git"Label shown in the fake terminal title bar.
headingstring"Changelog"Section heading above the terminal window.
descriptionstring"The release history..."Section subheading.
commitsChangelog22Commit[]noneOrdered list of log lines, oldest last-in-array shown with the blinking cursor.
classNamestringnoneExtra classes for the outer section element.

Types

type Changelog22ChangeType = "added" | "changed" | "fixed" | "removed";

interface Changelog22Commit {
  id: string;
  hash: string;
  version?: string;
  type: Changelog22ChangeType;
  text: string;
}

Behavior notes

  • Fully static server component: no client-side state. The blinking cursor is a pure CSS `animate-pulse` span, not JS-driven.
  • Commit hashes and dates are fixed demo strings, not generated at render time (no Math.random/Date.now), so static rendering and the thumbnail pipeline stay deterministic.
  • This block is the category's one sanctioned exception to the semantic-token rule: its terminal chrome and log-line colors (green/amber/red) use literal dark-theme classes intentionally, matching the precedent set by Auth's terminal sign-in block.