shadcn.io is not affiliated with official shadcn/ui
Reasons With Evidence About Block for React Aria
A payroll company's reasons to stay, as six rows: the reason at the start and, at the end, the figure behind it with where that figure was counted.
Installation
Overview
Six reasons for React with React Aria, written for Moorline, a fictional payroll service for small companies. A start-aligned header, then a definition list of rows from rail to rail that ends the block. Each row has the reason as a heading and one sentence at the start, and the evidence at the end: a percentage and the sample it was counted from, such as "61 of 64 corrections, last quarter". The percentage is worked out from the two counts, so the figure and the sample are one fact. On a phone the evidence sits under the reason. It's built from Guides, with a CSS entrance on the header and your theme's tokens for every colour. For an about page that wants proof next to each claim. The samples are example data.
FAQ
How do I change the reasons?
REASONS holds the title, the sentence, hit (how many of the sample met the claim), sample (how big it was), what the sample is (what) and when it was counted (period). The count of reasons in the introduction is the length of the list.
Which figures are worked out, and which are typed?
The percentage is hit divided by sample, rounded, and the line under it is the same two numbers, so editing either count updates both. Nothing is fetched, and no percentage is typed by hand. A sample of zero shows as none.
Why is each reason a row in a definition list?
The reason is the term and the evidence is the definition, so a screen reader reads them as a pair. The rows share one hairline between them, and the block ends on the last row, with no rule under it.
What happens on a phone?
The evidence drops under the reason, still in the same row, and the figure keeps to one line. Six rows stack. The header stays a short claim plus one sentence.