shadcn.io is not affiliated with official shadcn/ui
Static Grid Wall Logos Block for React Aria
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.
Installation
Overview
A static logo wall for React with React Aria. A compact header, "Trusted by 4,200 finance teams" and one sentence, sits over eighteen customer wordmarks in cells that share their hairlines. The wall runs from rail to rail of the page column, its top rule meets the rails at + marks, and it 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 (a serif italic, spaced capitals, a monospace, a heavy lowercase) with an icon beside it, above it, after it, in a ring or knocked out of a badge, so the wall reads as a row of different companies at a glance. Every logo is one muted colour and turns to the text colour on hover. A phone shows the first twelve, two by six; from sm all eighteen sit three across, and from lg six across in three rows. Built from Guides and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. Made for the social proof between a hero and the features, on any product with customers worth naming.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file. Each entry is a name, an icon (any Lucide icon), a lettering and a mark. The lettering is the Tailwind classes for the name's type, such as font-serif italic or font-semibold text-xs uppercase tracking-[0.25em]. The mark places the icon: inline beside the name, badge knocked out of a filled square, ring inside a circle, trailing after the name and stacked above it. The names are fictional placeholders for your own customers.
How do I use real company logos instead of wordmarks?
Replace each item's icon and name with the company's logo, at about the same height for all of them (h-6 to h-8). An inline svg drawn in currentColor, with role="img" and an aria-label, keeps the muted colour and the hover. An img takes the company's name as its alt and needs one-colour artwork, or the wall stops being quiet in light and dark mode.
How many logos should the wall have?
A multiple of six, so every row is full: eighteen fill six rows of three and three rows of six, and the shared hairlines never frame an empty cell. Twelve and twenty-four work too. On a phone the wall shows the first twelve, two by six, so the page doesn't scroll through every customer: change PHONE_COUNT to show more or fewer, and keep it even.
Why is there no line under the last row?
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. If nothing follows the wall, add a bottom border to the list's wrapper.
Is the logo wall accessible?
Yes. The header is an h2, and the logos are a list named "Customers": a screen reader announces how many items it holds and reads each company's name, while the icons are hidden from assistive technology. The names use the theme's text-muted-foreground at full strength, which passes WCAG AA on the page background. 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 right while each wordmark keeps its own direction, as a logo would.