shadcn.io is not affiliated with official shadcn/ui
GitHub List Integration Block for React
An 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.
Installation
Overview
An integration list section for React with Base UI, written for Mergequill, a fictional tool that drafts release notes from merged pull requests, and its GitHub connection. A compact header ("Pull requests, one state at a time") has the mark pair at its end. Under a band rule, a segmented filter (Open, Merged, Closed) shows a count for each state, worked out from the rows. Below it, the pull requests of the chosen state are rail-to-rail rows: the number and title, the branch pill (a feature branch into main) in code, who opened it, three check dots for lint, tests and the preview build, and whether it is in the release notes ("In release notes", "Skipped", "Not merged yet" or "Closed, not merged"). One merged row, number 402, failed to sync: it shows Retry, which runs for about a second and then reads "In release notes". The three states share one grid cell with unseen copies, so the list keeps its height when the filter changes, and a foot band says how many rows show and that nothing is sent to GitHub. 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, Toggle Group, Avatar, Status and 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 sent to GitHub, and the pull requests, authors and checks are example data.
FAQ
How do I change the pull requests?
Edit PULLS at the top of the file: each entry has an id, a number, a title, a branch, an author with initials, its state (open, merged or closed), three checks results (passed, running or failed, for lint, tests and the preview build) and notes (in, skipped or none). The filter counts, the "Showing 4 of 14" line and each row's note are worked out from the list. FAILED_ID names the one merged row whose sync failed.
Does Retry call GitHub?
No. Retry shows the row as syncing for about 900 milliseconds and then in the release notes. The foot band says so from the first paint ("Retry changes this page only. Nothing is sent to GitHub.") and describes each outcome; after Retry finishes it takes focus so the result is read out. In a real product, wire retryNow to your own re-sync of that pull request's data.
Does the filter move the page?
No. The live rows and an unseen copy of every state sit in one grid cell, so the list is always as tall as the longest state (Merged) and the foot band stays where it is. Choosing a state is a single selection and never empty: pressing the chosen one again keeps it.
How is it named for keyboards and screen readers?
The filter is a labelled group of three toggle buttons and the arrow keys move between them. Each title is an h3. The check dots are decorative, and each row carries the same facts as words for screen readers ("Checks: Lint passed, Tests failed, Preview build passed"). Retry is named by its pull request ("Retry syncing pull request 402"), and only a failed check uses the status colour.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
On a phone each row stacks: the title, the branch pill, then the dots and the note on one line, with the author hidden to save room. 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; reduced motion turns that off.
Related
- 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
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 Setup Integration
Guided stepsAn 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.
- 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
AWS List Integration
Synced tablesAn integration list section for a cloud cost tool reading from AWS: six cost-allocation tags as rows with a coverage bar, a state word and an Activate switch, a segmented filter with counts, and a working Retry on the one row that timed out.
- Pro
Grouped Comments List Integration
Grouped and triagedAn integration list section for a design-docs tool connected to Figma: comments grouped by frame in an accordion running rail to rail, a toggle that hides resolved ones without moving a header, and a Retry for the one comment that failed to sync.