shadcn.io is not affiliated with official shadcn/ui
Git Branch Timeline Changelog Block for React
A 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.
Installation
Overview
A branch timeline for React with Base UI, written for Trunkline, a fictional branching-model tool. A framed figure draws the 4.3 cycle with time running along the page and each branch as a lane. Main is the lowest lane with a solid line and filled dots, feat/inline-review is a lane of hollow dots on a lighter line, and fix/poll-timer-leak is a lane of diamonds on a dashed line, so the lanes differ by shape and line and not by colour. The two branches fork from main and merge back, and three release tags sit over main's commits as badges. Under the drawing, a list gives the same events as text: the hash, the message, the branch and the time, newest first. It's built from Badge, Guides and an inline SVG, with CSS transitions for the entrance and your theme's tokens for every colour. For branching-model docs, release retrospectives and engineering changelogs. The commits and times are example data.
FAQ
How do I draw my own branches?
Edit EVENTS at the top of the file, oldest first. Each event has an id, its lane, its parents (one for a commit, two for a merge), a hash, a message, an at time and an optional tag. Positions, curves and the box's proportions are worked out from that list at module scope, so adding an event adds a dot, its lines and its row in the list. Add a lane to LANES, LANE_Y and LINE.
How do I tell the lanes apart without colour?
By shape and line: filled dots on a solid line, hollow dots on a lighter solid line and diamonds on a dashed one, and each lane is named in text at its start. The forks and merges take the branch's line style, so you can follow a branch across its curves.
What does a screen reader get?
The drawing is hidden from assistive technology on purpose, and the list under it says the same in text: every commit with its hash, message, branch and time, tags included, newest first. Times are real time elements with a UTC date.
Is the horizontal spacing a real time scale?
No. Commits are spaced evenly in the order they landed, like a git graph, so the shape of the branches reads clearly; the dates are in the list.
How does it fit on a phone and in a right-to-left layout?
On a phone the graph keeps its proportions in a focusable region that scrolls sideways, and the list under it stays in one column. In a right-to-left layout the text around the graph mirrors, while the graph itself keeps its left-to-right time axis, as a git graph does.
Related
- Pro
Commit Log Changelog
Code and commitsA 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.
- 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
Lanes With Gates Release Train
Deploys and rolloutsA release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.
- 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 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
Deployment Log Tabs Changelog
Deploys and rolloutsTabs by environment with counts over a framed table of deploys: environment, commit with Copy, message, deployer, a duration micro-bar and a status word.