Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Cherry-Pick Log Changelog Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A cherry-pick log for React with React Aria, 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.