shadcn.io is not affiliated with official shadcn/ui
Git Branch Timeline Changelog Block for Ark UI
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 Ark 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.