shadcn.io is not affiliated with official shadcn/ui
Centered Light Trust Row CTA Block for React Aria
A centred statement call to action for an accessibility scanner: a big headline, the Shine Button and an outline button, then a framed row of four trust cells on shared hairlines that each open a short note on what they cover.
Installation
Overview
A centred call to action that answers the objection before it's raised, for React with React Aria. Between the page rails, a one-line statement headline ("Make your product accessible to everyone"), a sentence with a bold lead, a Shine Button and an outline button sit centred, and below them a frame of hairlines with + marks on its corners holds four trust cells on shared hairlines: WCAG 2.2 AA, SOC 2 report, single sign-on and data export. Each cell is a button: press it and a small note says exactly what it covers, so the claim and its meaning sit together instead of a logo row that asks to be taken on faith. The cells go two by two on a phone. It's built from Shine Button, Button, Toggle Tooltip and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For security-minded and compliance-led products where proof has to be one tap away.
FAQ
How do the cells open their notes?
Each cell is a real button that opens a small note above it with a click, a tap, Enter or Space, and closes with Escape or a click elsewhere, returning focus to the cell. Nothing depends on hover, so it works on a phone and with a keyboard. The note is named after the cell, and the cell's name ends with "what it covers" for screen readers.
How do I change the cells and what they say?
Edit CHIPS at the top of the file: each entry has an icon, a label and the note's text. The grid is built from the list (four columns from sm, two below it, so keep an even count). Only list what's true: a cell is a claim, and the note is where a reader checks it. Replace the SOC 2 and sign-on notes with your own facts, or remove the cells you can't back.
Where do the buttons go?
Both are links (href="#"): send the Shine Button to your sign-up or audit form and the outline one to a walkthrough.
Each renders a link when it has an href.
How is the row announced?
It's a list named "Trust and compliance", so a screen reader says how many cells there are and moves through them one by one. The icons are decorative and the list has no heading of its own: the section's heading is the headline above.
How does it fit on a phone?
The buttons wrap onto new lines and stay centred, the headline steps down from text-5xl to text-3xl, and a note is at most 16 rem wide and moves to stay on screen. Below sm the four cells take two rows of two, down to 320 px. In a right-to-left layout the grid and the notes mirror.