shadcn.io is not affiliated with official shadcn/ui
Commit Log Changelog Block for React
A git log of seven commits: a short hash with a Copy button for the full one, the commit type as a word, the message, an initials avatar and the day, with a Branch Select that swaps the list.
Installation
Overview
A commit log for React with Base UI, written for Hashline, a fictional git client. A start-aligned header has a Branch Select at its end (main or release/4.x) and a polite line that says what is shown. Under it a ruled list runs rail to rail, one row for each of seven commits: the short hash in mono with a Copy button that copies the full 40-character hash, the conventional-commit type (feat, fix, perf, chore, docs) as a word, the message, the author as initials and the day it landed. Choosing a branch swaps the list. It's built from Select, Copy Button, Avatar, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For git clients, release pages that link to history and engineering changelogs. The commits, names and hashes are example data.
FAQ
How do I change the commits and the branches?
Edit MAIN and RELEASE at the top of the file, and BRANCHES, which pairs each list with its label. A commit has an author, an ISO date, the full 40-character hash, a message and a type. Keep each list newest first, as the status line says. The short hash is the first seven characters of the full one.
What does the Copy button copy?
The full hash, not the short one, and it announces "Copied" politely. Each button is named with the short hash it belongs to ("Copy the full hash of 7966e69"), so a screen reader knows which commit it copies.
What happens when I choose a branch?
The list swaps and a polite line reads "7 commits on release/4.x, newest first". Both lists stay in the markup, one over the other in a single grid cell with the other unseen, so the block never changes height. The unseen list is hidden from assistive technology and from the tab order.
Why is the commit type a word?
A type is a convention, and a word reads in any theme and for any user, where a colour would not. Each badge also carries a visually hidden "commit", so the row reads "feat commit" for assistive technology.
How does it fit on a phone and in a right-to-left layout?
On a phone each row has three lines: the hash with its Copy button and the type, then the message, then the author and the day. In a right-to-left layout the rows mirror, while hashes and dates, which are data, are marked so they keep their order.
Related
- Pro
Cherry-Pick Log Changelog
Code and commitsA table of eight cherry-picks with a Checkbox per row and a result word, a Target branch Select that filters it, and a script of the ticked picks with a Copy script button.
- Pro
Git Branch Timeline Changelog
Code and commitsA drawn branch graph: main and two feature branches that fork and merge, commit dots by lane, three release tags as badges, and the same events as a list underneath.
- Pro
Commit Frequency Heatmap Changelog
Code and commitsA seven by twelve commit grid with the releases flagged above the weeks, a count in every cell, a keyboard-reachable readout and a sentence worked out from the data.
- Pro
Release Page Changelog
Spotlights and mediaA release page as a split: the tag, date, commit with a Copy button and contributors at the start, and the changes, new contributors and a collapsible assets table at the end.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Compact Badges Changelog
Lists and timelinesThe eight latest releases of a ticketing tool as one dense framed table: a mono version badge, a type tag with an icon and a word, what changed and the day it shipped.