shadcn.io is not affiliated with official shadcn/ui
Static Grid Wall Logos Block for React
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 Base UI. 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.
Related
- Pro
A dense wall of twenty-four customer wordmarks for a genealogy product, in six columns and four rows with shared hairlines; hovering a logo dims all the others.
- 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
Twelve customer wordmarks for a recipe-costing tool, each in a cell of its own whose lines run past its corners with a + mark, four across on desktop and two on a phone.
- Pro
A headline, one sentence, a Shine Button and an outline button at the start, and six customers in a hairline grid at the end, three across and two down.
- Pro
Centered Logo Cloud Hero
Logos and social proofA compact centered hero for a planning tool: an announcement link, two calls to action and a trusted-by band across the column of eight customer wordmarks in cells that share their hairlines.
- Pro
Under Hero Strip Logos
StripsA quiet strip for directly under a hero: one sentence for a job board on its own line and six open wordmarks beneath it, with no cells, no heading and no lines but the page's top rule.