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