shadcn.io is not affiliated with official shadcn/ui
Reasons With Evidence About Block for React
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 Base UI, 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.
Related
- Pro
Client Results Table About
CustomersA framed table across five shop clients for an A/B testing tool: what was tested, before and after, and the improvement computed as a chip with an arrow and a sign, with a ringed row on hover and focus.
- Pro
Proof Index Social Proof
CustomersSix kinds of proof for a reference-call tool laid out like a table of contents: each row leads from the kind of proof to its number along a solid hairline, with one line of detail and a link to its source.
- Pro
Guarantee Certificate About
Principles and processA home-warranty guarantee drawn as a certificate: a seal in SVG above the title, three promises with ticks, the fine print behind a disclosure that stays in the page, and a Shine Button to start a claim, in a card in card.
- Pro
Struck Through Before After
ComparisonsTabs of three workflows, each with a Before list where removed steps are struck through and an After list, a step count and one customer line.
- Pro
Commitments Ledger About
Principles and processA ledger of a nonprofit CRM's public promises: an ordered list of rows with the promise, how far along it is as a word and a progress bar, who owns it and when it was last checked, and a tally counted from the rows.
- Pro
Numbers Narrative About
Company storyA company's story told through four figures: a title stuck at the start while the reader scrolls, and rows that pair each large number with two sentences on how it happened.