shadcn.io is not affiliated with official shadcn/ui
Experiment Results Accordion Changelog Block for Svelte
An accordion of four hypotheses with the verdict as an icon and a word, and in each panel an arms table and a significance meter with a tick at 95 percent.
Installation
Overview
An experiment log for Svelte with Ark UI, written for Petridish, a fictional product-experiment tool. A start-aligned header counts from the data how many of four hypotheses won, and under a band rule the hypotheses run rail to rail as one accordion. Each trigger carries the verdict as an outline badge with an icon and a word (Winner, Loser, Neutral, Inconclusive), the hypothesis with its metric, and the relative lift in words with an arrow. The first row is open: a table of the arms with visitors, conversions, rate and the change against control, and a significance meter, a bar that fills to the measured confidence with a tick at 95%. The confidence is worked out from the rates and the sample sizes, and the verdict from the confidence, so the table, the meter and the badge agree. It's built from Accordion, Badge, Progress and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For experiment pages and release notes. The tests are example data.
FAQ
How do I change the hypotheses?
Edit HYPOTHESES at the top of the file: a title, a metric, the control and variant rates in percent, the variant's name and the visitors in each arm. The conversions, the relative lift, the confidence and the verdict are computed from those.
How is the verdict chosen?
verdictOf reads the confidence: at 95% or more the variant is a Winner when it is ahead and a Loser when it is behind. Below 95%, a test with at least 20,000 visitors per arm is Neutral (it was big enough to see a difference and found none) and a smaller one is Inconclusive. Change THRESHOLD and ENOUGH to suit your team.
Which row opens first, and can several stay open?
The first one, set by FIRST_OPEN. Opening another closes it.
Add multiple to the Accordion to let several stay open.
Are the closed panels in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every table renders from the start, hidden until its row opens.
How does it work with a keyboard and a screen reader?
Each trigger is a button inside its own h3 under the section's h2, so the headings list reads every hypothesis. Enter or Space opens a row and the button says whether it's expanded. The meter has a name that includes the confidence and the line it must cross.
The Up and Down arrows also move between rows.