shadcn.io is not affiliated with official shadcn/ui
A/B Test Results Changelog Block for React
A framed table of five A/B tests with the lift drawn as a bar from a zero line, a whisker for the interval, the lift in words and the decision as an icon and a word.
Installation
Overview
A test results table for React with Base UI, written for Forkpath, a fictional experimentation tool. A start-aligned header counts from the data how many of five tests earned a release, and under it an inset frame with + marks on its corners holds one table. Each row names a test and its metric, draws its lift as a bar that grows from a zero line (a solid tint for a gain, a hatched one for a loss) with a whisker across it for the 95% interval, says the lift in words ("+1.6 pts" with an arrow and the confidence), and ends on the decision as an icon and a word: Shipped in a version, Kept control, or Needs more data. The lift, the interval and the confidence are worked out from the two conversion rates and the sample size, so the bar, the text and the headline agree. It's built from Guides and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For release notes and experiment logs. The tests are example data.
FAQ
How do I change the tests?
Edit TESTS at the top of the file. A test has a name, a metric, the control and variant conversion rates in percent, the visitors in each arm, and the decision (SHIPPED, KEPT or WAITING, with a version when it shipped). The lift, interval, confidence, axis and headline are computed from those.
How are the interval and the confidence calculated?
With the usual normal approximation for the difference of two proportions: the standard error comes from both rates and the sample size, the interval is the lift plus or minus 1.96 standard errors, and the confidence is two-sided. It suits large samples of yes or no outcomes. For other metrics, replace resultOf with your own numbers.
Is the decision computed too?
No. A decision is a human call, so it's typed in the data. The bar and the confidence are there to show whether the call was sound: a whisker that crosses the zero line says the test has not separated the arms.
Why a lift axis and not a conversion rate?
The question each row answers is how far the variant moved from control, so every bar starts at the same zero line and the axis runs the same distance either side, to the widest interval in the table. Gains and losses differ by shape (solid or hatched) and by the arrow and sign in the text, never by colour.
Related
- Pro
Experiment Results Accordion Changelog
Metrics and chartsAn accordion of four hypotheses with the verdict as an icon and a word, and in each panel an arms table and a significance meter with a tick at 95 percent.
- Pro
Feature Adoption Curves Changelog
Metrics and chartsA reverse split with adoption curves aligned by weeks since ship, four features as buttons with their 28-day adoption and 7-day retention, the chosen curve bold.
- Pro
Error Rate Comparison Changelog
Incidents and uptimeFour error classes as rows, each a 14-day line split by a release marker with the average after it and the change as an arrow and a sign, plus a switch for one shared scale.
- Pro
Canary Release Ramp Changelog
Deploys and rolloutsA split with a five-step canary ramp as buttons at the start and, at the end, the chosen step as canary against stable in two cells with a guard-rail bar.
- Pro
Feature Flag History Changelog
Deploys and rolloutsA framed table of flag changes with each state drawn as a switch and a word, a rollout bar with its share in words, and the audience rule in a popover.
- Pro
Customer Request Changelog
Roadmap and customersA "you asked, we shipped" band of four requests, each with an avatar stack, a count of customers and a span bar on one shared axis from the first ask to the release that shipped it.