shadcn.io is not affiliated with official shadcn/ui
Commit Log Timeline Block for Solid
The history of one file as a rail of eight commits with hash, author, date and a five-square diffstat, each opening to its first hunk in a diff, with commits, authors and lines added and removed counted from the data.
Installation
Overview
See how one file changed, commit by commit, with this commit log timeline for Solid with Ark UI. It is written for Hunkline, a fictional file history viewer, and the file src/billing/invoice.ts. A hairline frame with a plus mark on each corner holds a band that counts the history from the data ("8 commits, 3 authors, +146 −61") and a vertical rail of eight commits, newest first. Each row has the message, the short hash in mono, the author as initials and a name, the date and a five-square diffstat: filled squares for the share of lines added, hollow ones for the share removed, beside the counts, and the commit that changed the most says "largest". A row is a button that opens in place, one at a time, to the first hunk of that commit in the Diff Text component, drawn in weights of your foreground instead of red and green, and a line naming the file and the hash. Every hunk is held to the same height, so opening a commit moves nothing, and a polite status line says which commit is open. It is built from Diff Text, Avatar, Badge, Guides and lucide icons, with a CSS entrance only. For repository pages, file history views and review tools. The commits are example data.
FAQ
How do I change the commits?
Edit COMMITS at the top of the file. Each commit is one commit(...) call: the hash, the message, the author, the date, the lines added and removed in the whole commit, and the lines of its first hunk, written the way a unified diff is (+ added, - removed, a space unchanged). The squares, the totals, the author count and the "largest" mark are derived from those numbers.
Does the hunk show the whole commit?
No: it shows the first hunk, and says so under the diff. The counts beside the squares are for the whole commit, so a commit can show a short hunk and a longer total. Wire in your own hunks by passing the lines of the hunk you want to show first.
Why are the added and removed lines not green and red?
So the diff reads in any theme and never rests on colour. Added lines are a stronger tint of the foreground, removed lines a lighter one, and the Diff Text component writes each line as a real insertion or deletion with a screen reader label ("Added", "Removed").
What stays in the page, and how do I use a real history?
Only which commit is open, which is local state. Nothing is fetched. To use a real history, read it from your Git host or from git log --numstat --follow for the added and removed counts, and git show for the hunk, and fill the same fields.
Is it accessible?
The commits are an ordered list and each row is a button with aria-expanded. The squares are decoration: the counts are text, with a screen reader sentence ("14 lines added, 6 removed"). Closed hunks are hidden from the keyboard and from screen readers. The hunk is code, so it stays left to right in every language.