shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Set how much traffic each variant gets and see what it costs in time, with this traffic split table for React with React Aria. 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. React Aria applies a typed value when you leave the field or press Enter, so the table moves then.
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.
