shadcn.io is not affiliated with official shadcn/ui
A/B Test Started Success Block for React
A confirmation panel for a started A/B test: two arms on shared hairlines, a slider for the traffic to Variant B, and the sample each arm needs and the days it takes, worked out from typed numbers, with a preview that applies nothing.
Installation
Overview
Let people see how long an experiment will take before they change its split, with this A/B test confirmation for React with Base UI. It is the Forkline panel after a test started, under a compact header. Inside a hairline frame two arms sit on shared hairlines, Control and Variant B, each with its one-line description, its share of the traffic as a figure and a bar, and the visitors that is a day. Under them a Slider named Traffic to Variant B moves from 10% to 90% in steps of 10 with a ruler under it. A side cell works out the sample each arm needs and how many days the smaller arm takes to reach it, with the last day, from typed numbers and a pure helper. The foot has the page's live line, the one Shine Button, Open the experiment, and an outline Button, Back to 50%. Nothing was started or changed. For experiment, feature-flag and optimisation tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was started, split or measured. The test, the traffic a day (6,400), the conversion rate today (3.1%) and the smallest lift worth detecting (10%) are typed constants. The slider only previews a split: the running test stays at 50% and the live line says so, and Back to 50% returns to it. To wire it, read the traffic and the baseline rate from your analytics, apply the chosen split through your experiment API from a confirm step of your own, and point Open the experiment at the experiment's page.
Where do the sample and the days come from?
The sample per arm is a common two-proportion estimate worked out by a pure helper from the typed baseline and lift, with 95% confidence (two-sided) and 80% power as typed constants: about 51,400 visitors at the typed numbers. The days are that sample divided by the visitors a day that the smaller arm gets at the chosen split, rounded up, and the last day counts from the day the test started. The page says these are typed numbers and that a sample size tells you how long to collect, not who will win; it never reports a result.
How does the slider work with a keyboard and a screen reader?
It is a slider you can drive with the arrow keys, Home (10%) and End (90%), one step of 10 at a time. Its spoken value is a sentence ("70% to Variant B, 30% to Control"), the visible percentage is hidden from assistive technology so it is not read twice, and the page's live line speaks the days to the sample a moment after you stop moving it, never on every step.
What does the slower arm mean?
The arm that gets fewer visitors a day takes longer to reach the sample, and it sets the time for the whole test, so a 70% split to Variant B makes Control the slower arm. At an even split both arms take the same time.
How does it look on a phone?
The two arms stay side by side, the slider spans the width under them and the figures and assumptions follow in a stacked cell. The foot holds the live line and the two buttons side by side (stacked on the very narrowest screens) and is pinned to the bottom of the screen while the page scrolls.
Related
- Pro
Feature Flag Enabled Success
Builds and deploysA confirmation panel for a feature flag that went live: a strip of figures over a rollout dial that moves by stops, an Environment switch, the number of users it reaches worked out from typed audiences, and a local Roll back.
- Pro
A full-height confirmation for a launched email campaign: four sending waves with a bar and a state word each, a Pause sending toggle that holds the running wave, and the email as sent, drawn greyscale in a frame.
- Pro
A confirmation for a published ad set: three cells on shared hairlines for the daily budget, the placements and the read-only targeting, and an estimated reach per day worked out from typed costs, with a line that says the numbers are typed.
- Pro
Analytics Connected Success
Integrations and syncsA confirmation window for connected analytics: a counting events-a-minute figure, a table of the first eight events that fade in and a bounded feed with Pause, and a docked panel of the chosen event's properties in a JSON tree.
- Pro
Rate Limit Increase Success
Plans and limitsA confirmation panel for a raised API limit: a group of buttons for all regions, EU and US, one derived sentence with a before-and-now meter, three endpoints with the same paired bars and their limits in words, the burst bucket, and a local benchmark.
- Pro
Small Multiples Sparkline Stats
SparklinesSix measures of a stationery shop as aligned sparkline rows in one framed panel on a shared month axis, with a guide that reads all six at the month under your pointer.