shadcn.io is not affiliated with official shadcn/ui
Branch Patterns Setup Integration Block for Ark UI
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 Ark 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.