shadcn.io is not affiliated with official shadcn/ui
A/B Test Results Carousel Block for Vue
Six A/B experiments on a hairline track, each with a state, a verdict word, a paired bar for variant A and B, the gap in points and the visitor count, sorted by lift, visitors or date only when you press a segment.
Installation
Overview
Put every running test in front of the team without a wall of tables, with this A/B test results carousel for Vue with Ark UI. Splitfern, an experiment tracker, shows six tests (checkout button copy, pricing page order, sign-up form length, onboarding checklist, trial banner wording and an invoice reminder email) as hairline cells. Each cell has the test's name and a Running or Ended Badge, a verdict with a glyph and words ("Significant, B ahead" or "Not yet significant"), a pair of bars for the two conversion rates on one shared scale, the gap in points ("B ahead by 1.1 pts"), the visitor count in compact form and the start date. A toolbar band holds a Segment Group "Sort by: Lift, Visitors, Newest". Pressing a segment re-orders the cells, returns to the first one and says so ("Sorted by biggest lift. First of 6."); nothing re-orders on its own. Under the track, a foot band holds the counter, a dot for each step and Previous and Next Buttons. Three cells show from the large breakpoint, two from medium, and one with the next peeking on a phone. The ruled bands come from Guides. The tests, the counts and the dates are made up for the example.
FAQ
Where do the rates and the verdict come from?
Everything is derived from four typed counts per test in EXPERIMENTS: visitors and conversions for A and for B. The rates are conversions per thousand visitors (shown as a percent with one decimal), the gap is B minus A in points, and the verdict is a two-proportion z-test on the sample: it says "Significant" when the score reaches 1.96 (the 95 percent line) and names the leading variant. It is a rule of thumb on example data, not a replacement for your stats engine, and the header says so.
When does the order change?
Only when you press a segment. The three sorts are total orders (biggest lift, then visitors; most visitors; newest start date), so two presses of the same segment give the same order. After a sort the track returns to the first cell and the polite status line says which sort ran. Pressing Previous, Next or a dot clears that sentence and shows the counter again.
How does it work with a keyboard?
Tab reaches the sort switch, Previous, the dots and Next. With focus inside the track's panel, the arrow keys move the track by one cell (mirrored in a right-to-left layout) and Home and End jump to the first and last page. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled. Cells that are out of view are hidden from the tab order and from screen readers.
How do I read the bars without seeing them?
Each bar is decoration: the rate sits beside it in text, and the gap and the verdict are words in the cell, so a screen reader hears "A 7.3%", "B 8.4%", "B ahead by 1.1 pts" and the verdict. The bars share one scale across all six tests, so a longer bar always means a higher rate.
What stays local in the demo?
All of it. The counts are typed example data labelled as such, the sort only re-orders what is on the page, and nothing is fetched. To wire it for real, load each test's visitor and conversion counts from your analytics into EXPERIMENTS; the rates, the gap, the verdict and the sort recompute from them. Set CRITICAL if your team uses another confidence level.