shadcn.io is not affiliated with official shadcn/ui
Cherry-Pick Log Changelog Block for React
A 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.
Installation
Overview
A cherry-pick log for React with Base UI, written for Graftline, a fictional release-branch tool. A start-aligned header has a Target branch Select at its end (all branches, release/4.2, release/4.1 or release/4.0) and a polite count. A framed table lists eight backports: a Checkbox, the commit on main (short hash and message), the branch it went to, and its result as an icon and a word (Applied, Conflict resolved or Skipped). A closing band builds a script from the ticked rows: plain git switch and git cherry-pick -x lines in a focusable region, with a Copy script button. It's built from Table, Checkbox, Select, Copy Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For release managers, maintenance branches and changelogs that show what was backported. The commits are example data; nothing runs.
FAQ
How do I change the picks and the branches?
Edit PICKS and BRANCHES at the top of the file. A pick has its hash, message, the branch it went to and a result (APPLIED, CONFLICT or SKIPPED). BRANCHES is the order the script visits branches in, newest first, and the Select's items are built from it.
How is the script built?
For each branch that has ticked rows on screen, the script writes git switch <branch> and then a git cherry-pick -x <hash> line for each pick. A skipped pick, which was never applied, becomes a comment instead of a command. Ticks you have filtered out are kept but left out of the script, and the script says so when nothing is ticked.
What do the buttons do?
Copy script puts the script in the region on the clipboard and announces "Copied" politely; it is inert while nothing is ticked. Nothing is run and no repository is touched: the script is for you to paste into a terminal in a fresh clone.
What does the Target branch filter do to the table?
It shows only the picks for that branch and says "Showing 3 of 8 picks". The full table stays in the markup as an unseen copy in the same grid cell, so the block never changes height, and the unseen copy is hidden from assistive technology and the tab order.
How does it fit on a phone and in a right-to-left layout?
On a phone the table keeps three columns: the checkbox, the commit with its target branch under the message, and the result. The script scrolls inside its own focusable region. In a right-to-left layout the table and frame mirror, while hashes, branch names and the script stay left to right.
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
Git Branch Timeline Changelog
Code and commitsA 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.
- 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
Rollback History Changelog
Deploys and rolloutsA table of rollbacks that runs rail to rail and ends the block: the day, the version it came from and the one restored, a reason badge, a sortable time to revert and how each ended, with a summary counted from the rows.
- Pro
Hotfix Log Changelog
Incidents and uptimeA hotfix log on one shared version axis: each row has an urgency as an icon and a word, a bracket over the affected versions and a flag at the fix, with a toggle that dims by urgency.
- Pro
Dependency Updates Changelog
Packages and versionsA table of eight dependency updates in two groups, Production and Dev: package, old and new version, the kind of bump and a three-pip risk, with sortable heads that reorder the rows inside each group.