shadcn.io is not affiliated with official shadcn/ui
Featured Focal Wide Card Grid Logos Block for React Aria
A wide flagship band over a grid of six wordmarks for a bookkeeping tool: plate, wordmark and tenure at the start, one big figure at the end, both rail to rail.
Installation
Overview
A featured focal for React with React Aria. A start-aligned header sits over one wide band that runs from rail to rail, its top rule meeting the rails at + marks. The band carries the flagship customer: a plate and a serif wordmark with a "Flagship customer" badge and its tenure at the start, and past a divider one big figure at the end, "9 days" to close the books, down from 26. Under it, six wordmarks fill a grid of cells that share their hairlines, three across from sm and two by three on a phone. The grid ends the block, so the next section's top rule closes it. Each wordmark is muted until hovered. On a phone the band stacks and the figure sits under a rule. Built from Guides, Badge and Lucide icons, with a CSS transition for the entrance and your theme's tokens for every colour. For a product with one customer to feature and a few more to name.
FAQ
How do I change the flagship and its figure?
Edit FLAGSHIP for the plate, wordmark and tenure; the figure and its caption are in the band's second part, "9 days" and "to close the books, down from 26". The header's bold lead sentence repeats the figure, so change it too.
How many logos should the grid have?
A multiple of six, so every row is full: it is three across and two rows from sm, and two across and three rows on a phone. Other counts leave an empty cell, and the hairline colour fills it.
Why is there no line under the grid?
The grid ends the block. On a page the next section draws its own top rule along the grid's foot, so a line here would double it, and the column has no bottom padding for the same reason.
Is the block accessible?
Yes. The header is an h2, the flagship band a card with its name as an h3, and the six customers are a list named "Customers" with each company's name as text. The icons are hidden from assistive technology and nothing in the grid is focusable, so the hover colour is only a visual touch. The figure is one bdi, so its digits and unit read together in a right-to-left layout.