shadcn.io is not affiliated with official shadcn/ui
Pull Request Merged Success Block for Ark UI
A confirmation panel for a merged pull request: a commit graph drawn in SVG beside the same history as a list, a group of buttons that dims one lane, the twelve checks as one count, the deploy in three timed steps and the merge hash with a copy button.
Installation
Overview
Show where a merge landed with this confirmation panel for React with Ark UI. It is the panel Diffhaven, a code-review tool, shows once a pull request is merged: a header with one action, the Shine Button that opens the repository, over one framed card ruled by Guides. The first cell is the history as a graph: six commits, newest first, each a row with its lane drawn beside it in SVG (main as filled dots, the branch as hollow ones, the merge commit joining them, the branch's end dashed because it was deleted), and a Toggle Group that dims the commits of the other lane. The second cell holds the twelve checks as one count and three lines, the deploy in three timed steps and the merge commit's hash with a Copy Button. For code hosts, review tools and any change that ships on merge.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was merged or deployed. The six commits, their hashes, the twelve checks and the deploy times are typed sample data, and the lane buttons only change which commits look dimmed. The merge hash is copied through the browser's clipboard. To wire it, fill COMMITS newest first from your history (each with its lane and its parents' ids), GROUPS from the pull request's checks and STEPS from the deploy's events; the graph's lines and dots are worked out from the commits and their parents.
Is the graph accessible?
The drawing is hidden from assistive technology and the list beside it is its text equivalent: each commit is a row with its subject, short hash, the author's initials and the day, and the rows that matter carry a note (the merge commit, the deleted branch, where the branch started). A caption read only by screen readers says how the lanes join. The graph is left-to-right whatever the page's direction.
What do the lane buttons do?
They are a group of three buttons (All, main and the branch) with one always on. Choosing a lane dims the other lane's commits and lines, keeps every row in place so the panel never changes height, and says how many commits are still lit.
How is the graph drawn, and how do I change the history?
Each row is 64 pixels tall and the graph is one SVG of the same height with two vertical lanes. Every edge is worked out from a commit and one of its parents: a straight line within a lane, a curve between lanes, so adding a commit to COMMITS moves the dots and lines with it. The end of a deleted branch is a dashed stub and a cross drawn from its newest commit.