Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

A/B Testing Dashboard Block for Ark UI

Four experiments in a list and, for the chosen one, a 14-day chart of both variants with a narrowing interval band, a confidence toggle that decides the verdict and a Ship B button that is off until B wins.

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

Decide whether an experiment has a winner, with this A/B testing panel for React with Ark UI. A hairline frame with a plus mark on each corner lists four experiments at the start (Checkout button copy, Pricing page layout, Onboarding checklist and Annual plan default), each with its state in words and its verdict. For the chosen experiment, one chart draws both variants' cumulative conversion rate over 14 days as two lines, and a second draws B's lift over A in points with a shaded interval that narrows as visitors arrive. A Toggle Group in the header sets the confidence to 90, 95 or 99%, and the verdict ("Winner: B", "A holds" or "No winner yet") follows from a two-proportion z-test, shown as a p-value. The Shine Button "Ship B" is off until B wins and the status line says why; pressing it only marks the experiment shipped in this page. On a phone the list becomes a Native Select. It's built from Toggle Group, Native Select, Shine Button and Guides. For experimentation and product teams.

FAQ

How do I fill it with my experiments?

Replace the makeExperiment calls with your own data: for each variant an array of daily visitors and daily conversions. The cumulative rates, the lift, the interval, the p-value and the verdict are all worked out from those counts, and the first three lines of the chart need nothing else. The seeded generator is only there so the demo has believable days.

How is the verdict decided?

By a pooled two-proportion z-test on the totals. The experiment has a winner when the two-sided p-value is under the level's alpha (0.10, 0.05 or 0.01 for 90, 95 and 99% confidence) and the winning variant is the one with the higher rate. The band in the second chart is B's rate minus A's plus and minus the critical z times the standard error of the difference, so it clears zero when the test passes, up to the small difference between a pooled and an unpooled error.

Can I stop as soon as the band clears zero?

Not safely. Checking every day and stopping at the first significant day inflates false positives well past the nominal level. Fix the sample size before you start, as Experiment Results does, and read the daily chart for shape, not for a stopping rule.

What stays local, and how do I wire it for real?

Everything: the visitors and conversions are seeded for a fixed 14 days, and Ship B only changes the label and the list in this page. To make it real, read the counts from your experimentation service, and call its API (or open a pull request that removes the flag) from the button's handler.

How does it look on a phone?

The experiment select comes first, then the two charts at a shorter height, then the four figures two to a row. The status line and Ship B stay pinned to the bottom of the screen.