shadcn.io is not affiliated with official shadcn/ui
GitHub Setup Integration Block for React
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 Base 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.
Related
- Pro
Can and Cannot Detail Integration
Scopes and stepsAn integration detail section for a release-notes tool installing on GitHub: a header with the mark pair and Install on GitHub, then two columns sharing a divider, the read-only permissions it uses and the ones it has no access to.
- Pro
GitHub Grid Integration
Cards and previewsAn 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.
- Pro
GitHub List Integration
Synced tablesAn integration list section for a release-notes tool reading from GitHub: fourteen pull requests under a segmented Open, Merged and Closed filter with derived counts, branch pills, check dots, release-note state, and a working Retry on the one row that failed to sync.
- Pro
GitHub Stats Integration
Bars and columnsAn integration stats section for a release-notes tool reading from GitHub: cycle time by repository as stacked bars of four stage medians on a shared scale, a legend, the total hours at the end of each row, and a headline worked out from the data.
- Pro
Datadog Setup Integration
Guided stepsA connect flow for a post-incident review tool and Datadog: a three-cell progress strip and three bands to choose the site, paste an API key and an application key with length meters, and print a sample test alert, ending in Finish setup.
- Pro
Frame Thumbnails Setup Integration
Guided stepsAn integration setup section for a design-docs tool connecting to Figma, in one framed window: paste a personal access token, tick greyscale wireframe thumbnails of the frames to link, name the link and watch its address follow, then finish with an honest result.