Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Split Linked Cells Logos Block for React

A card-in-card split: a headline, one sentence and a Shine Button, beside eight customers as linked cells that show a Read story arrow on hover and focus.

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 split logo block for React with Base UI. A muted shell with + marks on its corners wraps a raised panel that follows the theme. In the panel, at the start, a headline for a sales CRM, "Sales teams that stopped chasing updates", one sentence and a Shine Button; at the end, past a divider, eight customers as cells that share their hairlines, two across from the sm breakpoint. Every cell is a link to that customer's story. On a mouse, a Read story label and arrow appear on hover and on keyboard focus; on a touch screen they are always shown. The cell's name is the company followed by "read the story". On a phone the copy comes first and the cells follow in one column. Built from Frame, Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a trust section where each customer has a story to read.

FAQ

How do I change the customers?

Edit CUSTOMERS at the top of the file. Each entry is a name, an icon, a lettering and a mark. Keep an even number: the cells run two across from sm, so an odd count leaves one cell short and the border colour shows. The names are fictional placeholders for your own customers.

When is the Read story arrow shown?

On devices whose main pointer is a mouse or a trackpad it is hidden until you hover a cell or tab to it, and on touch screens it is always visible, so it never depends on hover. It is decoration: the link's name already ends in "read the story".

Can the cells be used with the keyboard?

Yes. Each cell is one tab stop with a visible focus ring drawn inside the cell, so the divider and the panel's edge never clip it, and the arrow appears with the same tint as hover.

Does the panel follow my theme?

Yes. The panel has no dark scope: it is light on a light page and dark on a dark one, and the muted shell, the ring and the shadow keep it separate from the page in both modes.

How does it fit on a phone?

The shell and the panel step down in size, the copy comes first, and the eight cells stack in one column, each at least 64 pixels tall with the arrow always shown. Nothing scrolls sideways at 320 pixels.

  • Pro

    Split Vertical List Logos

    Maps and lists

    A headline, one sentence and a Shine Button at the start, and five customers as link rows at the end, each with a wordmark, an industry chip and an arrow.

  • Pro

    Split Raised Panel Logos

    Splits

    A headline, one sentence and a Shine Button flat on the page at the start, and five customers in a raised panel at the end, two wide tiles over three narrower ones.

  • Pro

    Inset Bento Case Study Logos

    Bentos

    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.

  • Pro

    Split Headline Grid Logos

    Splits

    A headline, one sentence, a Shine Button and an outline button at the start, and six customers in a hairline grid at the end, three across and two down.

  • Pro

    Inset Tray Wall Logos

    Walls

    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.

  • Pro

    Split Framed Grid Logos

    Splits

    A headline, one sentence and a Shine Button at the start, and six customers open in two columns and three rows inside a hairline frame at the end.

All 100 logos blocks