shadcn.io is not affiliated with official shadcn/ui
Divided Rows Static Grid Wall Logos Block for Solid
A wall of eighteen wordmarks for a bug tracker in three rail-to-rail bands laid like bricks, no lines between the logos, the middle band shifted half a logo's width.
Installation
Overview
A static logo wall for Solid with Ark UI. A centred header, "Bugs get fixed at 9,000 companies" and one sentence, sits over eighteen customer wordmarks in three bands that run from rail to rail. Each band draws its top rule with + marks where it meets the rails, and there are no lines between the logos: the structure is the rules, and the logos stagger like bricks, the middle band shifted along by half a logo's width. The last band ends the block, so the next section's top rule closes it and a stacked page never doubles a line. Each wordmark is real text in its own lettering with an icon beside it, above it, after it, in a ring or knocked out of a badge. Every logo is one muted colour and turns to the text colour on hover. From lg each band holds six logos, from sm they wrap three and three, and a phone shows twelve, two and two in each band. Built from Guides and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. For social proof between a hero and the features.
FAQ
How do I change the customers?
Edit BANDS, three arrays of six. Each entry is a name, an icon (any Lucide icon), a lettering and a mark: inline beside the name, badge knocked out of a filled square, ring inside a circle, trailing after the name and stacked above it. The first four of each band show on a phone, so give them the shorter names.
How do the rows stagger?
Each band is a grid of five columns on a phone, seven from sm and thirteen from lg, and every logo spans two columns. A logo of the middle band starts in the second column, so its row sits one column, half a logo, to the end of the first row's. The column count is why there are six logos in a band and no more: they fill twelve of the thirteen columns, leaving a half logo free at one end.
Why is there no line under the last band?
The wall ends the block. On a page the next section draws its own top rule along the wall's foot, so a line here would double it, and the column has no bottom padding for the same reason.
Is the logo wall accessible?
Yes. The header is an h2, and each band is a list named "Customers, row 1" to "row 3", with each company's name as text; the icons are hidden from assistive technology. Nothing in the wall is focusable, so the hover colour is only a visual touch. In a right-to-left layout the grid fills from the end side while each wordmark keeps its own direction, as a logo would.