shadcn.io is not affiliated with official shadcn/ui
Variant Comparison Card Stats Block for Svelte
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 Svelte with Ark 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.