shadcn.io is not affiliated with official shadcn/ui
Stacked Rows With Category Labels Logos Block for Ark UI
Customers of a print-on-demand book service in three rows by industry on alternating tinted bands, each with a label and a customer count chip, the logos lying open under them.
Installation
Overview
A logo wall grouped by industry for React with Ark UI. A centred header gives the total, and under it three bands run across the page, one per industry: publishers, bookshops and universities. The first and the third are tinted, and the tint runs to the edges of the window while the solid rules stay on the page column, meeting its rails at + marks. Each band opens with its label and an outline chip that counts that industry's customers, then six wordmarks lie open under it, with no lines between them, six across from lg, three across from sm and two on a phone. The last band ends the block. It's built from Guides and Badge, with CSS for the entrance and your theme's tokens for every colour. For products that sell to several kinds of customer and want to say so.
FAQ
How do I change the industries?
Edit CATEGORIES at the top of the file: each has a label, a count, whether the band is tinted, and its customers. A customer is an icon, its lettering, how the icon sits beside the name, and the name. The header's total is the sum of the counts, so it stays true when you edit them.
Why does a chip say 1,240 when fewer logos are shown?
The chip counts the industry's customers; the logos are a selection. A phone shows four per band and the wider layouts six. If you would rather the chip match what is on screen, replace count with the length of customers.
How does the tint reach the edges of the window?
Each tinted band carries a decorative layer that extends a viewport's width past both sides of the column, and the section clips it, so there's no horizontal scroll. The rules and rails are drawn on top of it, so the lines stay crisp on the tint in light and dark.
How is it marked up for screen readers?
Each band is a labelled region with an h3 for the industry and a list of its customers, so a screen reader can move between industries by heading. The count in the chip is wrapped in a bdi element to keep its separator in order in a right-to-left layout, and the wordmarks keep their own left-to-right direction.