Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Experiment Results Accordion Changelog Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An experiment log for React with Base 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 hiddenUntilFound, so every closed panel stays in the markup as hidden="until-found", and the browser's find in page opens the row that holds a match.

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.

How does it fit on a phone and in a right-to-left layout?

Below lg the verdict sits above the title and the lift under it, and the arms table drops its visitors and conversions columns so it never scrolls sideways. Numbers and signed changes keep their reading order in a right-to-left layout.

  • Pro

    A/B Test Results Changelog

    Metrics and charts

    A framed table of five A/B tests with the lift drawn as a bar from a zero line, a whisker for the interval, the lift in words and the decision as an icon and a word.

  • Pro

    Feature Adoption Curves Changelog

    Metrics and charts

    A reverse split with adoption curves aligned by weeks since ship, four features as buttons with their 28-day adoption and 7-day retention, the chosen curve bold.

  • Pro

    Accordion Changelog

    Lists and timelines

    A release list for release-notes software: five releases as accordion rows, each with its version, date, one-line summary and change count, the newest open on a list of typed changes, and a foot band that links to every release.

  • Pro

    Before After Changelog

    Spotlights and media

    A compare slider for a design-handoff tool's release: one drawn editor window, its fourteen cramped toolbar icons before and three labelled groups after, under a draggable divider that also answers the arrow keys, with a short table of what changed.

  • Pro

    Feature Sunset Changelog

    Roadmap and customers

    Four retiring features as ruled Collapsible rows with a four-square phase meter; each opens to its four phases, who is affected and its replacement, and a toggle group filters by area.

  • Pro

    Error Rate Comparison Changelog

    Incidents and uptime

    Four error classes as rows, each a 14-day line split by a release marker with the average after it and the change as an arrow and a sign, plus a switch for one shared scale.

All 200 changelog blocks