shadcn.io is not affiliated with official shadcn/ui
Branch Patterns Setup Integration Block for React
An integration setup section for a preview-review tool connecting to Vercel: four ruled rows (a listbox of projects, a tags field of branch patterns, a switch to block the merge, a check of the latest preview) and a foot band with a Finish setup Shine Button.
Installation
Overview
An integration setup section for React with Base UI, written for Stagehouse, a fictional tool for reviewing preview deployments, and its Vercel connection. A compact header carries the mark pair at its end. Then four rows rail to rail, each under its own rule with a heading and a hint at the start and its control at the end. Row 1 is a framed listbox of three Vercel projects that the arrow keys move through. Row 2 is a tags field of branch patterns, preview/* and staging to begin with, where a star stands for any characters; a validation line is always in the page and says why a pattern was refused. Row 3 is a switch for blocking the merge until threads are resolved. Row 4 checks the newest preview of the chosen project against the patterns and the switch and says what would happen: "Preview ready, 2 open threads, merge blocked", or that the branch matches none of the patterns. A foot band holds a polite status line, present from load, and the Finish setup Shine Button, which waits for the check. Changing any choice clears the check. Nothing is sent to Vercel or to a pull request. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, Listbox, Tags Input, Switch, Button and Shine Button, with your theme's tokens for every colour. Vercel is named in text only: no Vercel logo, colour or wordmark ships with the block. Projects, branches and threads are example data.
FAQ
What stays local?
Everything. The project, the patterns and the switch are page state, the check is worked out from typed example data (PROJECTS: each project's newest branch, its build and its open threads), and Finish setup only changes the status line. Nothing is sent to Vercel or to a pull request, and nothing is stored. Wire your own project list, pattern storage and check where the demo changes state.
How do the branch patterns work?
A pattern is made of letters, digits and - _ . / *, up to 40 characters, and a star stands for any characters anywhere in it, so preview/* covers preview/header-fix. Press Enter or type a comma to add one; a repeat, a bad character or a sixth pattern is refused and the line under the field says why. The matching is Stagehouse's own rule for the demo, not something Vercel defines. Edit matchesPattern to change it.
Why does the check sometimes say a branch is not reviewed?
The check applies your patterns to the newest preview of the chosen project. The docs project's newest branch is docs/install-guide, which the starting patterns don't cover, so choosing it shows "Not reviewed" until you add a pattern such as docs/*. It is the quickest way to see that the patterns do something.
How do keyboard and screen reader users work it?
The listbox takes the arrow keys and keeps its choice when it loses focus. Every field has a visible label or a name, the tags field is described by its validation line (a polite live region), the check button is a real button and the status line is a polite live region present from load. Finish setup is marked unavailable until the check has run, and pressing it earlier says what is missing.
Does it differ between the seven targets?
Only in the parts each library names differently: the listbox, the tags field and the switch handle their changes in each library's own way. The listbox and the tags field are Ark UI on every React library. Behaviour, markup and copy are the same everywhere.
How does it behave on a phone and in right-to-left layouts?
On a phone each row stacks its control under its heading, and the foot band puts the button under the status line. In a right-to-left layout the rows mirror; branch patterns, project names and the branch in the check keep their own direction. The header fades up once on load, and reduced motion turns that off.
Related
- Pro
Pinned Comments Integration Detail
With a product drawingAn integration detail section for a preview review tool connecting to Vercel: a split with the access it asks for as three scope rows, three steps, a connect action, and a framed browser drawing with two numbered pins and the comment threads they open, each with a Resolve button.
- Pro
Preview Gallery Grid Integration
Cards and previewsAn integration grid section for a preview-review tool listing Vercel previews: a toggle that filters by build state, a derived tally, and six cells in shared hairlines, each with a drawn page, its branch, build state and open threads.
- Pro
Resolvable Threads List Integration
Grouped and triagedAn integration list section for a preview-review tool reading comments on a Vercel preview: a derived merge verdict with a progress bar, then thread rows with overlapped initials, a page path, the first words and a Resolved checkbox.
- Pro
Sentry Setup Integration
Guided stepsAn integration setup section for a release gate connecting to Sentry: three read-only steps as hairline cells, a listbox of Sentry projects, an environment toggle, a release switch, a test error that appears in the panel and a Finish setup button that waits for it.
- Pro
Webhook Endpoint Setup Integration
Keys and codeAn integration setup section for a failed-payment recovery tool connecting to Stripe: three numbered bands (a copyable webhook endpoint, a signing secret in a password field, four event checkboxes) and a foot band with a test event and a Finish setup Shine Button.
- Pro
Approval Screen Setup Integration
Choose and verifyAn integration setup section for a stock sync tool installing on Shopify: a narrow framed panel that sketches the approval step, with a store-handle field and fixed .myshopify.com suffix, four locked access scopes, a reserve location and an Install button.