shadcn.io is not affiliated with official shadcn/ui
Square Cell Wall Logos Block for React
A wall of twelve garden-shop customers in square cells that share their hairlines from rail to rail, each with a large icon, its name and a tiny line saying what kind of shop it is.
Installation
Overview
A square-cell logo wall for React with Base UI. A centred header, "Trusted by 1,800 garden shops", sits over twelve customers in square cells that share their hairlines and run from rail to rail, with the wall's top rule meeting the rails at + marks. Each cell stacks a large icon over the customer's name in its own lettering and a tiny line saying what kind of shop it is (nurseries, florists, farm shops). The icons sit in four frames (bare, ring, filled and tile), so neighbouring cells never match, and every logo is one muted colour that turns to the text colour on hover. A phone shows eight cells, two by four; from sm all twelve show, three across, then four from md and six from lg. The wall ends the block, so the next section's top rule closes it. Built from Guides and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. For a wall where each customer's kind of business is part of the proof.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file. Each entry is a name, a category (the tiny line), an icon (any Lucide icon), a frame (bare, ring, badge or tile) and a lettering, the Tailwind classes for the name's type. The names are fictional placeholders for your own customers.
How many logos should the wall have?
A multiple of twelve fills every row at every width: two, three, four and six columns all divide twelve. On a phone the wall shows the first eight (PHONE_COUNT, keep it even), so the page doesn't scroll through twelve tall cells. A count that doesn't divide leaves a short last row, and the shared hairlines show the border colour in the empty space.
How do I use real company logos?
Replace the icon, name and category of a cell with the company's logo in a one-colour svg drawn in currentColor, with role="img" and an aria-label, or an img with the company's name as its alt. Keep the cell square and centre the logo.
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.
Is the 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 and its kind of shop, while the icons are hidden from assistive technology. The names and the category lines use the theme's muted text colour at full strength, which passes WCAG AA. Nothing in the wall is focusable, so the hover colour is only a visual touch.
Related
- 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
Sixteen customers of a password manager as icon-only circles in one framed figure, with the customer named in a label on hover and as text for screen readers.
- 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
Sixteen square monogram tiles for a wildfire-risk mapping product in a narrow framed panel with + corner marks, each tile naming its customer on hover.
- 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.