shadcn.io is not affiliated with official shadcn/ui
GitHub Setup Integration Block for Radix UI
An integration setup section for a release-notes tool installing on GitHub: a progress strip and three bands to pick an account from radio cards, choose All or Only select repositories, and tick repositories under a Free plan limit of five, with Finish setup that waits for a valid choice.
Installation
Overview
An integration setup section for React with Radix UI, written for Mergequill, a fictional tool that drafts release notes from merged pull requests, and its GitHub install. A compact header ("Install Mergequill on your repositories") has the mark pair at its end. A three-cell progress strip (the catalog Steps: Account, Access, Repositories) sits under a band rule, followed by three bands, each a title and a sentence at the start and its control at the end. The first picks where to install from three radio cards (a personal account and two organizations, each with initials and a repository count). The second chooses All repositories or Only select repositories, the two choices GitHub's install page offers, and says that GitHub gives every app read-only access to repository metadata. The third filters and ticks repositories, shown as checkbox cells and as removable tags, under the Free plan's limit of five: the sixth is blocked with its reason, and All repositories is blocked when the account has more than five. The bands sit in a form whose Enter key does nothing, so typing in the filter never finishes the install. A closing band holds Finish setup, which waits for a valid choice and says what it is missing; finishing says how many repositories were installed "in this demo" and swaps the button for a ghost Disconnect, in the same space. The block ends on that band, so no rule closes it. The page's rails and top rule come from the Guides spine. It's built from Guides, Steps, Radio Group, Segment Group, Checkbox, Input and Shine Button, 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 installed or sent to GitHub, and the accounts and repositories are example data.
FAQ
How do I change the accounts, repositories and limit?
Edit ACCOUNTS at the top of the file: each account has an id, a handle, two-letter initials, a kind and its repos (each a name, a visibility and a short line). LIMIT is the plan's cap (5). Changing accounts clears the ticked repositories, and the counts, the tags, the strip's descriptions and the closing reason are all worked out from the same data.
Does Finish setup install anything on GitHub?
No. Finish setup switches the page to "Installed on 3 repositories in this demo. Nothing was sent to GitHub.", and a ghost Disconnect button takes it back. A polite status line says what stays local from the first paint. In a real product, send the user to your GitHub App's install address and read the installation back with your own server; GitHub's own page is where an organization owner approves the install, so the radio cards only mirror that choice.
How does the Free plan limit work?
Once five repositories are ticked, the rest are disabled and their cells say "Free plan limit of 5 reached"; remove a tag or untick one to add another. Choosing All repositories on an account with more than five repositories keeps Finish setup waiting and says why ("The Free plan covers 5 repositories and fenwhistle has 6. Choose only some."). With All chosen, the repository list is dimmed and inert, and the block does not change height.
How is it named for keyboards and screen readers?
The accounts are a labelled radio group, the access choice a labelled segmented group, and each repository checkbox is named by its repository. Each tag has a Remove button named for its repository. Finish setup stays focusable while it waits and its reason is written under it; pressing it then does nothing. The strip's current step is announced by the catalog Steps.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone the strip keeps its numbers and hides the descriptions, the account cards and repository cells become single columns and the access choice runs full width. Handles, repository names and counts keep their left-to-right order in a right-to-left layout while the bands themselves flip. The header fades up once on load and the dimming changes with a short transition; reduced motion turns both off.