shadcn.io is not affiliated with official shadcn/ui
Five Cell Bento Logos Block for React Aria
Exactly five cells for a usage-billing API: one featured customer story as tall as two rows and four single customer cells, each outlined by lines that run past its corners, with one Shine Button in the header.
Installation
Overview
A five-cell bento for React with React Aria. A compact header, "Billed by what they use", carries the block's one Shine Button at its end. Under it, one featured story takes the start side at the height of two rows: the flagship's plate and wordmark, an industry pill, the result at display size, a quote and who said it, and a "Read the story" link. Four single cells fill the other half, two by two: a wordmark, an industry pill and one usage figure. The cells sit apart, each outlined by Guides lines that run a little past its corners, with a + mark at its start corner. On a phone the featured cell comes first and the four others become a snap carousel with the next card showing. Built from Guides, Shine Button, Badge, Avatar and Button, with a CSS transition for the entrance and your theme's tokens for every colour. For a landing page that wants one customer to lead and four to back it up.
FAQ
Why exactly five cells?
One featured cell as tall as two rows plus four single cells make a complete two-by-two beside it, so the layout has no gaps. Add or remove a cell and the grid beside the featured one has a hole. For a different count, use logos-bento-wide-featured-top (one plus three) or the static grid wall.
How do I change the customers?
Edit STORY for the featured customer (name, icon, lettering, industry, quote, result and who said it) and SUPPORTERS for the four others: each is a wordmark, an industry, a figure and its label. The names are fictional placeholders.
Where do the buttons go?
Both are links (href="#"): point the Shine Button at your customers page and Read the story at the case study.
The Shine Button renders a link when it has an href.
Read the story is an outline button that links the same way.
How does the carousel work on a phone?
Below md the four cells are a horizontal scroller with scroll snapping, each about three quarters of the width so the next one shows. The scroller takes focus, so a keyboard user can scroll it with the arrow keys, and it is named "More customers". From md it becomes a two-by-two grid and the scroller behaviour is gone.