shadcn.io is not affiliated with official shadcn/ui
Static Grid Wall With Compliance Row Logos Block for React Aria
A wall of twelve law-firm wordmarks for a legal-document tool in cells that share their hairlines, closed by one centred line of four outline chips naming the standards it is audited to.
Installation
Overview
A logo wall with a compliance row, for React with React Aria. A centred header, "Trusted by 1,900 law firms" and one sentence, sits over twelve customer wordmarks in cells that share their hairlines, from rail to rail of the page column with + marks where the top rule meets the rails. Under the wall a closing band draws one centred line: "Audited every year to" and four outline chips, each a check and a standard written as text (SOC 2 Type II, ISO 27001, GDPR, HIPAA), never a certification logo. The chip band ends the block, so the next section's top rule closes it. 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, in one muted colour that turns to the text colour on hover. All twelve sit two by six on a phone, three across from sm and four across from lg. It's built from Guides, Badge and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. For products whose customers ask about audits before they ask about features.
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, badge, ring, trailing or stacked. The names are fictional placeholders.
How many logos should the wall have?
Twelve, or another multiple of twelve: it divides into two, three and four columns, so every row is full and the shared hairlines never frame an empty cell. A wall that doesn't fill its last row shows the border colour in the gap.
How do I change the compliance chips?
Edit STANDARDS, a list of names. Each becomes an outline badge with a check; they wrap onto a second line on a narrow screen and stay centred. The chips are text on purpose: an audit body's mark is trademarked, so the block names the standard and nothing more. List only what you hold.
Why is there no line under the chips?
The chip band ends the block. On a page the next section draws its own top rule along the band's foot, so a line here would double it, and the column has no bottom padding for the same reason.