shadcn.io is not affiliated with official shadcn/ui
A/B Test Guardrail Monitoring Block for React Aria
The 14 days of one A/B test scrubbed with a range, showing the primary metric and three guardrails as estimates with 95% intervals on their own axes, a limit tick and a worked-out state for each.
Installation
Overview
Check that a winning variant is not hurting something else, with this guardrail panel for React with React Aria. It is Splitguard, an A/B guardrail monitor (made up), comparing Variant B with control over 14 days. A native range scrubs the days, and for the day you choose four metric rows show how B differs from control: sign-up rate is the primary metric, and error rate, p95 latency and unsubscribes are guardrails. Each row draws the estimate as a dot with a whisker for its 95% interval on its own axis, a faint line at zero and, for a guardrail, a heavy tick at the agreed limit. The interval narrows as more visitors are counted. A guardrail is Crossed limit once the whole interval is past its limit, otherwise Within limit; the primary metric reads Ahead, Behind or Not clear yet. The header is a sentence worked out from all 14 days, with no action button. Guides draw the frame and its bands; the entrance is CSS only. For product analysts and anyone who has to decide whether to stop a test.
FAQ
How do I use my own results?
In the demo each metric has an effect, an se14 (its standard error on day 14) and a limit, and the daily estimates are generated from them. In your app replace estimateOf and seOf with the difference and standard error your analysis gives for each day. The intervals, states and the header are derived from those two, and the axes come from min and max.
When is a guardrail crossed?
When the low end of its 95% interval is above the limit, so even the optimistic reading is over it. Early on the interval is wide and straddles the limit, so a guardrail reads Within limit even when the estimate is high; the row shows the interval so you can see that. Waiting for a fixed sample is the safer habit than stopping the first time a line moves.
How does the day control work?
It is a native range named Day of the test. Arrow keys move one day, Home and End jump, and the rows update at once. A polite status line reads every metric's state about 600 ms after the last change. It starts on day 9, the day the error rate crosses its limit.
How is this different from the A/B comments block?
That block runs a test on two comment layouts and ends in one verdict. This one watches a test that is already running and keeps its guardrails in view; it does not pick a winner and has nothing to press.