shadcn.io is not affiliated with official shadcn/ui
GitHub Grid Integration Block for React Aria
An integration grid section for a release-notes tool reading from GitHub: five check rows with a switch each, and a drawn pull request box whose merge button reads Merge or Waiting on a count of checks as you switch them.
Installation
Overview
An integration grid section for React with React Aria, written for Mergequill, a fictional tool that drafts release notes from merged pull requests, and its GitHub connection. A compact header ("Choose the checks a pull request waits for") has the mark pair at its end. Under a band rule, five checks (Lint, Tests, Preview build, Changelog entry, Signed commits) are rows at the start: a name, a sentence, how it stands on a sample pull request in words (Passed, Running, Failed) and a switch. Behind a split divider, a framed drawing of the pull request shows its title, its branch, one row per check (a switched-off check reads "Not waited on") and a merge button that says "Merge" only when every check you switched on has passed, and otherwise "Waiting on" the number of checks still holding it. A polite status line, present from load, says what is holding the pull request and that the switches change this page only. The drawing is hidden from assistive technology because that sentence carries the same facts. The page's rails and top rule come from the Guides spine. It's built from Guides, Switch and Status, with your theme's tokens for every colour. GitHub is named in text only: no GitHub logo, colour or wordmark ships with the block. Nothing is sent to GitHub, and the pull request and its checks are example data.
FAQ
How do I change the checks and the sample pull request?
Edit CHECKS at the top of the file: each check has an id, a name, a detail sentence and a fixed result (passed, running or failed) on the sample pull request. START_ON lists the ones switched on at the start, and PULL holds the sample's title, number and branches. The button's words, the "Waiting on 2 checks" count and the status sentence are all worked out from those lists, so adding a check needs no other edit.
Does a switch change anything on GitHub?
No. A switch changes this page's state, and the status line under the drawing says so from the first paint: "The switches change this page only. Nothing is sent to GitHub." In a real product, save the chosen checks with your own settings and have Mergequill hold a pull request until the checks it names have passed. GitHub itself decides what blocks a merge through your branch protection rules; the drawn merge button only shows what your tool would wait for.
What does the status line say when I switch checks?
It names what is holding the pull request: "2 checks holding the pull request: Preview build is still running and Changelog entry failed." Switch both off and it says every check you switched on has passed, so the pull request can merge and joins the notes. Switch everything off and it says no check is waiting, so every merged pull request is added. Screen readers hear each change politely.
How is it named for keyboards and screen readers?
Each switch is named by its check ("Wait for Lint") and each row has a real h3. A result is a dot and a word, never colour alone, and only the failed check uses the status colour. The drawn pull request box is decorative and hidden from assistive technology. The status sentence beside it describes the same state.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the checks come first and the framed pull request sits under them, with a rule between. Branch names keep their left-to-right order in a right-to-left layout while the rows themselves flip. The header fades up once on load and the merge button changes tone with a short transition; reduced motion turns both off.