shadcn.io is not affiliated with official shadcn/ui
Build Passed Success Block for React Aria
A confirmation window for a green build: a bar of four stages as wide as their share of the run, a typed terminal log for the chosen stage with a once-only replay, a small artifacts table and a local Deploy this build.
Installation
Overview
Confirm a green build with this window for React with React Aria. It is the Kilnrun console, a build service, in a fixed-height window with no title bar. The top bar has a success mark, the heading and the one action, the Shine Button Deploy this build, which gives a local result. A Toggle Group of four stages (install, lint, test, build) is as wide as each stage's share of the run, worked out from its seconds so the shares add to 100, and choosing one shows its log in a terminal under it. The terminal is the only dark part of the block, as terminals are; the rest follows the theme. A Button replays the typed log once. Under the terminal a small table lists the artifacts with their sizes and total. For CI services, build pages and any pipeline that finishes.
FAQ
What stays in the page, and how do I wire it for real?
Nothing ran. The stages, every log line, the test counts and the artifact sizes are typed sample data, and Deploy this build only says it was queued in this demo. To wire it, build STAGES from your pipeline's run (each stage with its seconds, its printed lines with their offsets and a summary) and ARTIFACTS from the files it produced; the total time, the shares, the stage start times, the test total and the artifact total are all worked out from them.
Why is the terminal dark in every theme?
Because a terminal is dark by nature: it carries the dark scope on purpose, with a comment in the file, while the window, the stage bar and the table follow the active theme in light and dark. Its text and its times keep their contrast in both.
How does the stage bar work?
It is a group of four buttons with one always on. From the small breakpoint each is as wide as its share of the run (13, 16, 43 and 28 percent here), so the bar is the run drawn to scale; on a phone they are two by two over a thin bar with the same shares, the chosen one solid. Choosing a stage swaps the log and says its time and summary in the status line, and the window keeps its height. On React Aria the arrow keys stop at the last stage instead of wrapping.
Is the log readable, and what does Replay do?
Every line is real text with its time since the start, in a focusable scroll region named for the stage, so the keyboard can scroll it. It never moves on its own: Replay prints the chosen stage's lines once more with a short staggered fade, and with reduced motion they appear at once. Nothing loops. On a phone the lines never wrap; the region scrolls sideways inside itself.