shadcn.io is not affiliated with official shadcn/ui
Variant Comparison Card Stats Block for React
An A/B test result: a band of visitors, lift and confidence, then two variant panels whose conversion rates and 95% intervals sit on one shared scale, with the winner badged.
Installation
Overview
A variant-comparison card for React with Base UI. Splitwell, an experiments tool, opens with how far the winning signup form lifted conversions. A band of three cells under it gives the visitors in the test, the lift of B over A and the confidence, with a bar and a tick at the 95% a winner needs. Two panels follow, a little apart, whose lines run past their corners: each has a conversion rate at display size, the signups behind it and a 95% interval on a scale that is the same in both panels. The shaded strip is where the intervals overlap. It is built from Badge, Progress, SlidingNumber and Guides.
FAQ
How do I change the test?
Edit VARIANTS at the top of the file. A variant has a name, a title, its visitors and the conversions among them. The rates, the 95% intervals, the lift, the confidence, the scale, the overlap and the winner are computed from those four numbers per variant. NEEDED is the confidence a winner needs.
How is the confidence worked out?
It is a two-sided z-test on the two conversion rates: the difference of the rates over the combined standard error, turned into a confidence with the error function. Each interval is the rate plus or minus 1.96 standard errors. It is a sketch of the usual calculation for a demo. Use your own statistics for real decisions.
What happens when nobody wins?
If the confidence is below the needed level, no panel gets the badge and the headline says that no variant has pulled ahead yet. The lift and the intervals still show, so the reader can see how close the test is.
Is it accessible?
Yes. Each interval drawing is an image named with its variant, the rate and the interval, and the same numbers are written as text beside it. The confidence is a progress bar with a name. The lift keeps its sign left to right in right-to-left layouts, and the scale itself is always drawn from low to high.
Related
- Pro
Renewal Delta Callout Stats
ComparisonsA subscription renewal comparison that leads with the percent change at display size, then the month before and this month as two tiles.
- Pro
Period Comparison Table Stats
ComparisonsA five-row month-on-month report with this period, the period before, and a bar for the size of each change.
- Pro
Shared-Scale Week Comparison Stats
ComparisonsA week-on-week traffic comparison with two sparklines drawn on one shared scale, so the two weeks can be compared by eye.
- Pro
Benchmark Scale Stats
DistributionsFive support metrics, each on a scale line with three markers (your team as a solid dot, the industry average as a ring, the top 10% as a tick), a verdict with a glyph and words, and the three values as text.
- Pro
Before and After Load Time Stats
ComparisonsA page-speed comparison with the time before a tune, the time after it, and the seconds saved on a connecting line between two dots.
- Pro
Bullet Chart Stats
Bar and columnFour bullet graphs for department KPIs, each with three shaded ranges, a bar for the result, a tall tick for the target, a labelled scale and a verdict with a glyph and words.