shadcn.io is not affiliated with official shadcn/ui
CI/CD Setup Onboarding Block for React
A framed window that reads a repository's file tree, lists what it detects from the file names, proposes four pipeline steps with a switch and an editable command each, and keeps a copyable pipeline.yml and a dry run in step.
Installation
Overview
Start a build pipeline from what a repository already contains, with this window for React with Base UI. It is Rivetmoor, a build-and-release service, in a framed window with a top bar (Add pipeline is the one Shine Button) and two panes. At the start a select of two typed repositories, the file tree of the one chosen in the catalog Tree View, a “Detected” list read from the file names (Node 22 from package.json, Docker from Dockerfile, tests from the tests folder) and four proposed steps, Install, Test, Build and Deploy, each a Switch with its command in an Input. At the end a copyable pipeline.yml, rebuilt with every switch and edit and copied with Copy Button, and a Dry run that steps the enabled stages and says nothing ran.
FAQ
How does it detect things?
DETECTORS is a typed table of rules, each a file name (found at any depth) or a folder; detectedOf reads the repository's paths and keeps the rules that match. The steps start from it: Install and Build are on, Test is on when there is a tests folder and Deploy is on when there is a Dockerfile, and a step that starts off says why. Pick the other repository and everything is read again.
What does pipeline.yml hold?
The repository's name, the push trigger, the runtime and one entry for each enabled step with its command, written by yamlOf from the switches and fields, so turning a step off or editing a command changes the file at once. A command with characters YAML would misread is quoted. Copy puts the file on the clipboard and says so.
What does the dry run do?
It walks the enabled stages in order, 500 milliseconds each, marking each Running and then Done, and finishes with “Dry run: N stages in this demo. Nothing ran.” With reduced motion every stage is marked at once, and editing a switch or a command stops it. A stage that is off reads Off.
When does Add pipeline refuse?
When no step is on, or when a step that is on has an empty command; the status line says which, the field shows its problem in the reserved line under it and focus goes there. A step that is off keeps its command, shown read-only.
What stays local in the demo, and how do I wire it?
Everything. The repositories are typed lists of paths, nothing is committed, built or deployed, and Add pipeline says so. In your app list the real files from your Git host, keep DETECTORS for the rules you support, and commit the file where add says so.