Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Metric Cards Bento Logos Block for Radix UI

Six 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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A grid of six customer results for React with Radix UI. Under a centred header, the cells sit in two bands of three, split by solid dividers, each band's top rule meeting the rails at + marks; the grid ends the block. Every cell opens with the customer's wordmark so each number has an owner, then shows the figure at display size, what it counts, and a chip with an arrow and the change since last year. There is no quote anywhere, so it reads as proof from named customers rather than a statistics band. It's built from Guides and Badge, with CSS for the entrance and your theme's tokens for every colour. For finance, analytics and logistics products that can name their customers' numbers.

FAQ

How do I change the figures?

Edit RESULTS at the top of the file. Each entry has a customer, a value, a label for what it counts, a change for the chip and falls for the arrow. Three fields place the cell's divider and + marks (lines, rowEnd): if you change how many cells there are, update them so the dividers and marks match the new rows.

Why are the figures wrapped in bdi elements?

A figure with a sign, a unit or a symbol ("98.4%", "$48M", "3 hrs") is wrapped in a bdi element so a right-to-left layout keeps it in reading order instead of moving the sign to the wrong side. The change chip is wrapped the same way.

How is it marked up for screen readers?

Each cell is a list item with the customer's name as real text, then a term and its description: the label is read first, then the number, then "Since last year" and the change. Trend arrows are decorative and are not mirrored in right-to-left layouts.

How does it fit on a phone?

The six cells become three bands of two: the same cells, with their dividers and + marks moved to match, so nothing is hidden and nothing scrolls sideways. Figures step down from text-5xl to text-4xl and the wordmarks are sized to fit a 320 pixel screen.

Does it follow my theme?

Yes. Cells are the page background between hairlines, chips are an outline badge, and the arrows are the foreground colour, not green or red. Primary isn't used at all because the block has no button. It follows your preset in light and dark, square or rounded.

All 100 logos blocks