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.
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.jsonPrefer 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
| Prop | Type | Default | Description |
|---|---|---|---|
| windowTitle | string | "changelog.git" | Label shown in the fake terminal title bar. |
| heading | string | "Changelog" | Section heading above the terminal window. |
| description | string | "The release history..." | Section subheading. |
| commits | Changelog22Commit[] | none | Ordered list of log lines, oldest last-in-array shown with the blinking cursor. |
| className | string | none | Extra 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.
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.