shadcn.io is not affiliated with official shadcn/ui
Time-to-Result Comparison About Block for React Aria
Three ways to a first data pipeline, each with an approach, a time-to-result bar on one shared scale, and a line for what it takes to keep.
Installation
Overview
Three ways to a first result for React with React Aria, written for Ramplane, a fictional data-pipeline product. A centred header sits over three columns: Ramplane, a consultancy, and building it yourselves. Each column states the approach, draws "time to first result" as a bar on one scale (the longest of the three, in days), and closes with an upkeep line. The bars stay full width when the columns stack on a phone. It's built from Guides and a description list, with a CSS entrance on the header and your theme's tokens for every colour. For an about page that should compare an approach with the two a buyer already has in mind. The durations are example data.
FAQ
How do I change the three ways?
They are WAYS: a title, the approach, days for the bar, the words the duration is read in (when) and an upkeep line. The scale is the largest days value. Change a duration and that bar, and the scale under the columns, follow. The words "2 days", "6 weeks" and "4 months" are the reading; the days are what the bar uses.
How do the bars share a scale?
Every bar is that way's days divided by the longest way. Four months is the full bar, six weeks is 42 of those 120 days, and two days is a short mark on the same track. A short bar is still honest because the words beside it say "2 days".
How is it read by a screen reader?
The heading is an h2, and each way is an h3. Time to first result and upkeep are a description list. The bar is hidden, and the duration is read as the words plus the day count on the shared scale, so the length of the bar is not the only source of the fact.
How does it fit on a phone?
The three columns stack. Each one after the first opens with a top rule, and the bar inside it stays the full width of the column. On a wide screen a hairline with corner marks divides the columns. Nothing scrolls sideways at 320 pixels.