shadcn.io is not affiliated with official shadcn/ui
Inset Tray Wall Logos Block for React
A four by four wall of customers for an alumni-network product in an inset tray, with fifteen wordmarks and a last cell that is the Shine Button, See all 4,000+ customers.
Installation
Overview
An inset logo wall for React with Base UI. A tinted shell with + marks on its corners holds a raised panel (card in card, so the block follows your theme and gains depth from its frame instead of a dark panel), and inside it a four by four grid shares its hairlines. Fifteen customer wordmarks, muted until hovered, fill the first fifteen cells; the sixteenth is the call to action, the Shine Button "See all 4,000+ customers", on a slightly deeper tint, so the wall ends in the one thing to click. From sm the wall is four across; there the button's cell spans two and the last logo waits for lg, so every row is full. A phone shows eight logos two by four over a full-width button cell. Built from Frame, Shine Button and Guides, with CSS for the entrance.
FAQ
How do I change the button?
Edit the last li: the label, and the link. It is the only primary control in the block.
The button renders the link it's given with render, with nativeButton={false}.
Why fifteen logos and one button?
A four by four wall has sixteen cells, and the last is the button. On the narrower layouts the button spans two cells so it stays readable, and the fifteenth logo is hidden between sm and lg to keep every row full; on a phone eight logos show. If you change the count, keep the logos plus the button's cells a multiple of the column count.
Why is it called dark inset if it follows the theme?
The slug keeps the name of shadcn.io's black wall, but the block follows your theme instead of forcing a dark panel: depth comes from the Frame and its raised panel, a tinted shell around a bg-card panel with a ring and a shadow, which reads as a tray in light and dark.
Is the wall accessible?
The header is an h2 and the cells are a list named "Customers": each name is text, its icon is hidden from assistive technology, and the last item is the link. The button is the only tab stop and has a visible focus ring. The number in the button is wrapped in bdi so a right-to-left layout keeps "4,000+" in order.
Related
- Pro
Inset Tray Strip Logos
StripsA tray strip for a paint-matching product: an outline badge and six linked customer wordmarks in two rows of three, inside a tinted shell that holds a lighter panel.
- Pro
A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.
- Pro
A wall whose headline is one of its cells, for a wholesale food-ordering product: a four by four grid in shared hairlines where a two-by-two cell holds the heading, a line and the Shine Button, and twelve wordmarks fill the rest.
- Pro
A four by four wall of customers for a wellness-booking product, with a raised two by two cell in the middle that holds the flagship's mark, a chip, one line and a link to its story.
- Pro
Bento Sparkline Logos
BentosA bento for a data warehouse in a card-in-card shell: four customers that each show the drop in slow queries as a figure and a falling trend line, beside one customer story set at the end.
- Pro
Dark Inset Single Marquee Logos
MarqueesA single row of twelve customer wordmarks for a home-inspection report tool, riding in a raised tray with a pause button, each tile lifting under the pointer.