Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Inset Bento Case Study Logos Block for React

A card-in-card showcase for an incident-response tool: one raised story panel with a big result at the start, and a numbered list of four more customers' results at the end.

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

An inset case study for React with Base UI. A muted shell with + marks on its corners holds two panels. At the start, a raised one carries a single customer's story: the plate and wordmark, an industry pill, the drop in resolve time at display size ("−71%"), a quote and who said it, and a "Read the story" link. At the end, a flat one lists four more customers as numbered rows, best first: a wordmark, what changed in a short sentence ("Resolve time, 52 to 19 min") and a chip with the change. The block follows your theme, the shell and the ring doing the work a dark panel would. From lg the two panels sit side by side and the rows stretch to the story's height; on a phone the list sits under the story. Built from Frame, Guides, Badge, Avatar and Button, with a CSS transition for the entrance and your theme's tokens for every colour. For a product whose proof is one story and a ranking.

FAQ

How do I change the ranked rows?

Edit RESULTS: each entry is a wordmark (name, icon, lettering, mark), a detail sentence and the change chip, written with its sign. The rows are in the order you list them, and the numbers are counted for you, so reorder the array to re-rank. Four rows fit beside the story; a fifth makes the list taller than the story and the panels stop lining up.

How do I change the story?

Edit STORY at the top: the customer, its industry, the quote, the result and its label, and who said it. Keep the quote to two sentences so the two panels stay about as tall as each other.

Is the ranking a real ordered list?

Yes. The rows are an ol, so a screen reader announces the position and the total, and the visible number is a count of the same order. The list sits under its own heading, "More results, best first". The change chips carry a down arrow for decoration and the sign is part of the text.

Does it follow my theme?

Yes. Nothing is dark by itself: the story panel is the card colour with a ring and a shadow, the list panel the page colour, and the shell a tint of the muted colour, so both light and dark presets keep the story lifted above the list.

What moves?

The header and the shell fade up once when the page loads, with CSS transitions, and each row's wordmark eases to the text colour on hover. With reduced motion the transitions are off.

  • Pro

    Bento Sparkline Logos

    Bentos

    A bento for a data warehouse in a card-in-card shell: four customers that each show the drop in slow queries as a figure and a falling trend line, beside one customer story set at the end.

  • Pro

    Bento Featured Case Study Logos

    Bentos

    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

    Inset Featured Focal Logos

    Flagship customer

    A split for a patch-management tool: one flagship customer in a raised panel at the start, six integrations as rows with a Live status at the end, a solid divider between.

  • Pro

    Metric Table Logos

    Metrics

    A captioned table of four outcomes for an insurance-quote product, each with its median and a change chip, beside a column of five insurer wordmarks.

  • Pro

    Numbered Ranking Logos

    Maps and lists

    Ten customers of an onboarding product ranked 01 to 10 in rows that run from rail to rail, each with a counter, a wordmark and its industry, collapsing to five on a phone.

  • Pro

    Card Inset Big Metric Checklist CTA

    Figures and stats

    A card-in-card startup-program CTA split in two: one giant credit figure circled by a hand-drawn pen stroke in a hairline frame at the start, and the headline, a three-line checklist, a Shine Button and an eligibility note at the end.

All 100 logos blocks