A/B Test Result Card React component
An experiment result worked out from your raw counts: rates, change, confidence and a 95% interval for each metric, with a daily chart and a clear ship or keep running call.
About the A/B Test Result Card component
A/B Test Result Card takes raw visitor and conversion counts and tells you what they mean. It works out the rates, the change, the confidence and a 95% interval for you.
The call at the top is plain, and the button only offers to ship when the result clears your target. Results that aren't there yet say so, which stops a good-looking early number from being shipped too soon.
When to use it
Use it in experiment dashboards, growth reviews and product analytics.
It suits yes-or-no metrics such as purchases and signups. Averages such as revenue per user need a different test.
Installation
Add the A/B Test Result Card component to your project with the shadcn CLI. It lands in components/ab-test-result-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/ab-test-result-cardProps
<AbTestResultCard /> accepts 9 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Shorter checkout" |
| hypothesis | string | "One page instead of three should lift completed orders." |
| controlName | string | "Three steps" |
| variantName | string | "One page" |
| metrics | { id: string; label: string; control: AbTestArm; variant: AbTestArm; controlSeries: number[]; variantSeries: number[] }[] | DEFAULT_METRICS |
| target The confidence a result needs before it counts, in percent. | number | 95 |
| sampleGoal Visitors the test planned for. | number | 50000 |
| onShip | (metric: AbTestMetric) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Shorter checkout"
- hypothesisstringDefault: "One page instead of three should lift completed orders."
- controlNamestringDefault: "Three steps"
- variantNamestringDefault: "One page"
- metrics{ id: string; label: string; control: AbTestArm; variant: AbTestArm; controlSeries: number[]; variantSeries: number[] }[]Default: DEFAULT_METRICS
- target
The confidence a result needs before it counts, in percent.
numberDefault: 95 - sampleGoal
Visitors the test planned for.
numberDefault: 50000 - onShip(metric: AbTestMetric) => void
A/B Test Result Card FAQ
- How is confidence worked out?
- With a two-sided, two-proportion z-test on your counts, shown up to 99.9%.
- What does the interval strip show?
- The likely range of the change. If the bar crosses the centre line, the result could still be no change.
- Can I change the target?
- Yes. Set target to the confidence you need, such as 90 or 99.
- Should I stop as soon as it says a variant wins?
- It's safest to wait for your planned sample, since checking early makes false wins more likely.
