shadcn.io is not affiliated with official shadcn/ui
Static Grid Wall With Metric Row Logos Block for React
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 Base 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.
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 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.
- Pro
Featured Focal With Metric Trio Logos
Flagship customerA flagship customer for a billing tool in a wide framed card with the modules it runs, closed by a full-width band of three large figures: utilities, years of history and uptime.
- Pro
Metric Hero Strip Logos
MetricsA giant static member count for a loyalty platform under a centred header with two buttons, then a band of three secondary figures and a closing strip of eight customer wordmarks.
- Pro
Metric Cards Bento Logos
BentosSix customer results for an invoice-financing product in two bands of cells, each with the customer's wordmark, a figure at display size, what it counts and a chip with the change since last year.
- Pro
Split Metric Band Logos
MetricsA headline, one sentence and a Shine Button at the start, six customers open in three columns and two rows at the end, and a band of three figures across the foot.