shadcn.io is not affiliated with official shadcn/ui
Build Pipeline Matrix Changelog Block for Radix UI
A run-by-stage matrix of the last six builds with a result and a time in every cell, a failed run that explains itself, and a stage lens that tints a column.
Installation
Overview
A build-pipeline changelog for React with Radix UI, written for Smeltwick, a fictional CI service. The header counts from the data how many of the last six builds passed ("5 of 6 builds passed"). One inset framed table with + marks on its corners holds a row per run (its number, branch, commit, trigger and total time) and a column per stage: Install, Lint, Build, Test and Deploy. Every stage cell is a shape and a word with its time, never colour alone: a check and "Passed", a cross and "Failed", a dash and "Skipped". The failed run has a row of its own under it, "Failed at Test", with the first lines of the error in a focusable pre. A toggle group above the table picks a stage: its column takes a quiet tint and a polite line under the table gives that stage's median time and how often it failed. It's built from Guides, Toggle Group and Status, with CSS transitions for the entrance and your theme's tokens for every colour. For CI dashboards, release notes that show the build behind a version and status pages for a pipeline. The runs are example data.
FAQ
How do I change the runs?
Edit RUNS at the top of the file. A run is a number, a branch, a short commit, a trigger and one outcome per stage, written with the small pass, fail and skip helpers (a stage and its seconds). The headline, each run's total, the median times and the failure counts are all computed from the list. Give a failing run its errors lines and its "Failed at Test" row appears under it by itself.
Why is there only one status mark?
A status colour should mean a real failure, so only the failed cell takes one, with the word "Failed" beside it. Every other result is a shape and a word in the foreground colour: a check and "Passed", a dash and "Skipped". In a greyscale or high-contrast theme nothing is lost.
What does the stage toggle do?
It tints one stage's column in every row and rewrites the line under the table: the median time of that stage, and in how many of the runs that reached it, it failed. Choosing "All" gives the pass count and the median run. It changes only this block; the table keeps its height and nothing is re-run.
Is it a real table?
Yes: a native table with a caption, scope on every header, the run number as the row header and tabular numbers. The scroll region around it has a name and takes focus, so a keyboard user can reach the columns that sit past the edge. The error lines sit in their own focusable region too.
How does it fit on a phone and in a right-to-left layout?
Below lg the table scrolls sideways inside its region and the run number stays pinned at the start, so every row keeps its stage results. In a right-to-left layout the table mirrors while run numbers, branches, commits and times stay in reading order.