shadcn.io is not affiliated with official shadcn/ui
Accent Featured Cell Wall Logos Block for React
A four by four wall of customers for a wellness-booking product, with a raised two by two cell in the middle that holds the flagship's mark, a chip, one line and a link to its story.
Installation
Overview
A logo wall with one promoted cell for React with Base UI. A centred header, "Booked by 3,000 wellness studios", sits over a four by four grid whose cells share their hairlines from rail to rail. Twelve customer wordmarks, muted until hovered, ring a two by two cell in the middle that is lifted off the wall by a ring and a shadow: the flagship's mark on a plate, a "Flagship" chip, one line about it and a link to its story. The wall starts at the page's top rule with + marks on the rails and ends the block, so the next section's top rule closes it. On a phone the flagship comes first, across both columns, over the twelve logos two by six. Built from Badge, Button, Guides and Lucide icons, with CSS for the entrance.
FAQ
How do I change the promoted customer?
Edit FLAGSHIP (its name, icon and lettering) and the line of text in the cell, and point the link at the customer's story. The twelve other customers are in CUSTOMERS; keep that a multiple of four so the wall has no empty cell.
How do I move the promoted cell?
The cell is placed with md:col-start-2 md:row-start-2 and spans two rows and two columns; the other cells flow around it. Change the start column and row (columns 1 or 3, rows 1 or 3) to move it to a corner. On a phone it is the first cell whatever its desktop place, so the flagship is read first.
Where does the link go?
It is a link (href="#"): point it at the flagship's case study.
The button renders the link it's given with render, with nativeButton={false}.
How is the cell raised in a light theme?
In a light theme the card colour and the page colour are almost the same, so the cell gets a ring in the text colour at low strength and a shadow, which also fall over its neighbours. In a dark theme the card colour is lighter than the page and the same ring and shadow keep it apart. Nothing is a fixed colour.
Is the wall accessible?
The logos are a list named "Customers" and the flagship is its first item, with its name as an h3; the icons are hidden and the names are text. The link is the only focusable part and has a visible focus ring. In a right-to-left layout the grid fills from the right while each wordmark keeps its own direction.
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
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 bento for an on-call alert router: one tall customer story with a big result, a quote and a link, beside four customers that each carry an industry pill and a retention figure, in cells that share their hairlines.
- Pro
Featured Focal Hub Logos
Flagship customerA flagship customer in a framed card with a hairline tree down to a bracket of six supporting wordmarks, the caption "Integrates with" sitting on the line, for a release-management tool.
- Pro
A four by four wall of customers for an alumni-network product in an inset tray, with fifteen wordmarks and a last cell that is the Shine Button, See all 4,000+ customers.