Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

Is it a real table?

Yes: a native table with a caption, scope on every header and the test as the row header. The bar is decorative, so every number is also text, and screen readers hear whether the lift was better than, worse than or no clear difference from control.

How does it fit on a phone and in a right-to-left layout?

Below md the bar moves under the test's name and the decision under its lift, so nothing scrolls sideways. The axis is drawn left to right in every direction because a lift is a distance from zero; text mirrors.

  • Pro

    An 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

    A 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

    Four 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 rollouts

    A 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 rollouts

    A 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 customers

    A "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.