shadcn.io is not affiliated with official shadcn/ui
Code Quality Gate Dashboard Block for React
A quality gate of six conditions, each a track with a threshold tick and a pass or fail in a glyph and a word, editable number fields for every threshold, and a 12-week coverage line against the coverage threshold.
Installation
Overview
See whether a branch clears your bar, and what a stricter or looser bar would do, with this quality gate for React with Base UI. A hairline frame with a plus mark on each corner holds six Plumbwell conditions: coverage, duplicated lines, new bugs, new vulnerabilities, technical debt and code smells. Each is a track filled to its measured value with a tick at its threshold, the value in tabular figures and a pass or fail drawn as a filled check or a hollow cross and spelled out in a word. Every threshold is a Number Input: the header ("Gate failed: 5 of 6 conditions hold") and the tracks recompute as you type, and a polite line says what the gate does once a field settles. Below, a 12-week coverage line is drawn against the coverage threshold, with the same numbers in a table for screen readers. It's built from Number Input, Button and Guides, with hand-drawn tracks and chart in foreground tones. For code health pages, release checks and engineering reviews.
FAQ
How do I use my own conditions?
Edit CONDITIONS: an id, a name, the measured now, the default threshold base, a direction of min (at least) or max (at most), a ceiling for the track and a unit. The pass or fail, the count in the header and the tick are all worked out from those. Replace TREND with your weekly coverage, oldest first.
What happens when I change a threshold?
The tick moves and the condition passes or fails at once, and the header and the "N of 6 pass" count follow. The field settles when it loses focus: an empty field goes back to its default, a value over the track's ceiling is held at the ceiling, and the polite line reads the new gate result. Reset puts every threshold back.
How is pass or fail shown without color?
Twice over: a filled circle with a check against a hollow circle with a cross, and the word Passed or Failed beside the value. The tracks use foreground weights only.
What stays local, and how do I wire it for real?
Everything: the measures are typed, thresholds are kept in the page and nothing is saved or scanned. To make it real, load the measures from your analysis tool, store the thresholds in the gate's configuration and send them from the number fields' change handler.