shadcn.io is not affiliated with official shadcn/ui
Static Grid Wall With Metric Row Logos Block for Ark UI
A start-aligned proof block for a payroll tool: a band of four figures between two hairlines, then twelve customer wordmarks as an open wall with no lines of its own.
Installation
Overview
A logo wall led by its numbers, for React with Ark UI. A start-aligned header, "Where every pay run lands on time" and one sentence, sits over a band of four figures (companies, money paid each month, pay runs on time, countries covered) between two hairlines that meet the rails at + marks, each figure a large number over its label in cells that share their dividers. Under the band the customers are an open wall of twelve wordmarks with no cells and no lines: only the band gives it structure. 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, muted until hovered. The figures sit two by two on a phone and in one row from lg; the wall is eight logos two across on a phone, twelve four across from sm and six across from lg. It's built from Guides and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. For products whose scale is the argument, with customers to name beneath it.
FAQ
How do I change the figures?
Edit METRICS at the top of the file: each entry is a value and a label. Each figure is a term and its description in one list, with the label under the value, so a screen reader hears "Pay runs on time, 99.98%". The values are wrapped in a bdi element so a sign, a currency or a unit stays in reading order in a right-to-left layout. The band is drawn for four; another count needs the grid's columns changed.
How do I change the customers?
Edit CUSTOMERS: each entry is a name, an icon, a lettering and a mark. The wall is open, so it needs no particular count to avoid an empty cell, but twelve fills six across, four across and two across without a short row. PHONE_COUNT sets how many a phone shows; keep it even.
Why does the wall have no lines?
The band above it already carries the structure: two rules and four corner marks. Cells under it would stack a third set of lines on a block that has one idea, so the logos float in open space and the band does the framing. For a wall in cells see Static Grid Wall.