shadcn.io is not affiliated with official shadcn/ui
A/B Test Traffic Split Table Block for Solid
An experiment table where each variant has an allocation field, Control takes the rest so the split always adds to 100, a three-segment band draws it, and visitors a day and days to 10,000 follow from typed daily traffic.
Installation
Overview
Set how much traffic each variant gets and see what it costs in time, with this traffic split table for Solid with Ark UI. A compact header names the test. Inside a hairline frame with a plus mark on each corner, a strip holds a Number Input for visitors a day and two figures, the fastest and the longest run to 10,000 visitors. A three-segment band draws the split, and a native table lists Control, Variant A and Variant B with an allocation field for each variant, the visitors a day it gets and the days it needs. Control has no field: it always gets the rest, so the three shares add to 100 whatever you type, and a field that would break the total is held back and says so. A variant sent no traffic never gets there, and the table says "Never". One status line reads the split after typing has rested. It is built from Number Input, Guides and a CSS split band. For experiment tools, rollouts and any allocation that must add up.
FAQ
How do I use my own variants and target?
Edit VARIANTS (an id, a name and a fill for each), TARGET for the number of visitors a variant needs and the starting texts START_DAILY, START_A and START_B. For more than two editable variants, add a field per variant and let splitOf give Control what is left; the bar and the table read the same shares.
What happens if I type a split that doesn't add up?
You can type anything; the numbers used are always clamped so Control, A and B total 100. The field you edited last wins, the other is held back, and the status line says which ("Variant B held back so the split totals 100%"). Leaving a field writes the clamped values back into both.
How are the days worked out?
Visitors a day for a variant is the daily traffic times its share, rounded; days to 10,000 is 10,000 divided by that, rounded up. A variant with no share has no visitors and shows "Never"; the strip names the fastest and the longest run among those that have one.
Is the split readable without seeing the band?
Yes. The band is an image with a text alternative ("Split: Control 40%, Variant A 35%, Variant B 25%"), the table repeats every share as text and one polite sentence reads the split about 600 ms after you stop typing, only when it changed.
What stays local, and how do I wire a real test?
Everything: the traffic and the shares are three useState texts and nothing is saved or routed. To make it real, send the clamped shares to your experiment service when a field is left, and read the daily traffic from your analytics instead of a typed field.