Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CI/CD Setup Onboarding Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Start a build pipeline from what a repository already contains, with this window for React with Ark 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.

How does it look on a phone?

The window keeps a fixed height and the two panes stack into one scrolling column: repository, files, detected and steps first, then the file and the dry run. The tree sits in a box of its own height so a longer repository never moves what follows.