shadcn.io is not affiliated with official shadcn/ui
Three Equal Featured Bento Logos Block for React Aria
Three customer stories of equal weight for a headless CMS, each a whole case study in its own column: a wordmark plate, an industry pill, a big figure, a two-line quote and who said it.
Installation
Overview
A three-story proof band for React with React Aria. A centred header sits over a band that runs rail to rail and splits into three columns of equal weight, with solid dividers that meet the band's top rule at + marks. Each column tells one customer's story in full: their wordmark on a muted plate beside an industry pill, a figure at display size with what it counts, a two-line quote and the person who said it. No story outranks the others, so use it when you have three strong results and don't want to pick a flagship. It's built from Guides, Badge and Avatar, with CSS for the entrance and snap scrolling, and your theme's tokens for every colour. For content platforms, developer tools and any product with a few customers of the same standing.
FAQ
How do I change the stories?
Edit STORIES at the top of the file. Each story has a customer (an icon, its lettering, how the icon sits beside the name, and the name), an industry, a figure and its label, a quote, and a person with initials and a role. The columns are equal, so keep the three quotes to about two lines and the figures to a few characters.
Can I show two or four stories?
Yes, but the layout is three columns from md: change md:grid-cols-3 to match the count and the dividers follow, because they come from the list itself. The + marks sit on every divider after the first, so they stay correct for any count.
What happens on a phone?
The three columns become a row of cards you swipe through, each snapping into place at 85 percent of the width, so the next story shows at the edge as a hint. The list is focusable so keyboard users can scroll it with the arrow keys, and it shows a focus ring.
How is it marked up for screen readers?
The stories are items of one list. Each quote is a figure with a blockquote and a figcaption for the person; each figure is a term and its description. Signs and units sit in bdi elements so a right-to-left layout keeps them in reading order, and the wordmarks keep their own left-to-right direction.