shadcn.io is not affiliated with official shadcn/ui
Commit Log Changelog Block for Vue
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 Vue with Ark 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.