shadcn.io is not affiliated with official shadcn/ui
Inset Tray Wall Logos Block for Solid
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 Solid with Ark 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's asChild receives its props: spread them onto your router's link.
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.