shadcn.io is not affiliated with official shadcn/ui
Split Panel Dual Preview CTA Block for React
A reverse split CTA for an A/B testing tool: two variants as choice cards on a tinted panel flush to the rail, each with a page preview, a click-through ring and a lift badge, beside a Shine Button that follows the choice.
Installation
Overview
Let visitors weigh two versions of something before they pick one with this reverse split experiment section, for React with Base UI. A tinted panel runs flush to the start rail and holds a Radio Group of two choice cards: each shows a skeleton of the page it tested, a Circular Progress ring with its click-through rate, how many visitors clicked, and a Badge with the lift on the winner. Past a solid divider that meets the top rule, the headline, a short paragraph, a results line and a Shine Button sit at the end; the copy comes first in the page and first on a phone. Choosing a card rewrites the results line and the button, from "Roll out B, +18%" to "Keep A as it is". Every rate and the lift are worked out from the visitor and click counts. The product is Trialwise, a made-up testing tool. Built with Radio Group, Field, Circular Progress, Badge, Shine Button, Button and Guides, with CSS transitions only; the radios, rings and mock buttons use foreground tones so the Shine Button is the one primary control. For experimentation tools, A/B test summaries and any call to action that follows a choice between two options.
FAQ
How do I change the variants and their numbers?
Edit the VARIANTS array at the top of the file. Each variant has an id, a letter, a summary of what it changed and the views and clicks counted for it. The first variant is the original: the lift compares the best variant with it. Everything else is computed: each ring is the click-through rate in whole percent, rounded down, the winner is the variant with the highest rate, and the lift is how much more often the winner was clicked than the original, also rounded down so it is never overstated. With 1,900 of 5,000 and 2,250 of 5,000 clicks, the rates are 38% and 45% and the lift is 18%.
How do I connect the button to a rollout?
The button is a real link: point its href at your rollout or deploy page and add the variant, for example /experiments/hero/rollout?variant=b. The block keeps the chosen variant in one value, so that is where to read it. The button is a ShineButton with render set to an a element and nativeButton={false}.
How do keyboard and screen reader users choose a variant?
The two cards are a radio group named "Variant to roll out": Tab reaches the chosen card and the arrow keys move and choose. Each card's name is its label, with its summary and its counts, and the winner is named "the winner" for screen readers. The previews and the rings are decoration, hidden from assistive technology, because the text beside them says the same. After a choice, one polite message reads the new results line; nothing is announced when the page loads.
Why doesn't the layout move when I choose a card?
The two results lines share one grid cell and the two button labels share another, so each is as large as the longer of the pair and choosing a card only changes which one shows. The one that isn't chosen is hidden from sight and from screen readers.
Are the previews real screenshots?
No. Each is a few bars and a block drawn in CSS, with the second version's shorter headline and a bolder button in the foreground tone, so the block ships with no images. Swap them for your own screenshots if you have them: they sit above each card's text and are decorative.
Related
- Pro
Split Panel Pill Toggle Plan Card CTA
Prices and offersA split call to action for a product analytics tool: the pitch, a payment-method pill and the Shine Button at the start, one plan card in a hairline frame at the end, between solid rails.
- Pro
Split Panel Tier Benefits CTA
Pickers and togglesA reverse split call to action for a partner program: a referral dial in a hairline frame at the start, beside the tiers as ruled rows and a Shine Button that names your tier.
- Pro
Compact Segmented Tab Control CTA
Slim bandsA slim upgrade band between solid rails, split by a divider: the headline with a rolling price at the start, a billing segment and a Shine Button on the end.
- Pro
Centered Light Tier Selector CTA
Pickers and togglesA centred sponsorship call to action for an open-source project: a band of five amount cells on shared hairlines, a Shine Button that names the chosen monthly amount, a Custom cell that opens a number field in the same space, and a closing band that counts the sponsors.
- Pro
Split Layout Before After Slider Hero
Interactive demosA split hero for a site speed tool: a headline, a Shine Button and a second action beside a speed report that fills its cell edge to edge, before on one side of a handle and after on the other.
- “Pro
Split Layout Quote Metrics Hero
TestimonialsA compact hero with a headline and two actions beside a customer's pull quote, over a ruled band of before-and-after metrics with their improvements.