Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Split Open Grid Logos Block for React

A headline, one sentence and a Shine Button at the start, and nine customers open in three columns and three rows at the end, with the divider as the only line.

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. At the start, a headline for music-school software, "Every student in tune from lesson one", one sentence and a Shine Button. At the end, past a divider that meets the page's top rule at a + mark, nine music schools in three columns and three rows with no lines between them: each is an icon, bare, in a ring or knocked out of a square, over the name in its own lettering. The divider and its mark are the only lines in the block, so the grid reads as open space. On a phone the copy comes first and the schools follow under a rule, still three across. Built from Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a quiet trust section.

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 (plain, ring or badge: how the icon sits above the name). Keep nine: three across and three down. With no cell lines, a short or long last row would just look uneven. The names are fictional placeholders for your own customers.

Why are there no lines between the customers?

The divider is the point: it separates the copy from the proof, and the open grid reads lighter than a wall of cells. The divider starts at the page's top rule with a + mark; on a phone a rule with marks takes its place between the two parts.

What happens in a right-to-left layout?

The layout mirrors: the copy stays at the start of the line and the grid at the end, and the divider follows. Each logo keeps its own direction, as a logo would.

How does it fit on a phone?

The copy comes first, then a rule with + marks and the nine schools three across, each name set small enough to fit a third of the column at 320 pixels. Nothing scrolls sideways.

What moves, and what happens with reduced motion?

The copy and the grid fade up once when the page loads, with CSS transitions, and a wordmark's colour eases on hover. With reduced motion every transition is off and the section simply appears.

  • 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

    Split Monogram Grid Logos

    Splits

    Nine customers as square monogram tiles in a hairline grid at the start, and a headline, one sentence and two calls to action at the end.

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

  • Pro

    Split Metric Band Logos

    Metrics

    A headline, one sentence and a Shine Button at the start, six customers open in three columns and two rows at the end, and a band of three figures across the foot.

  • Pro

    Wordmark Only Strip Logos

    Strips

    A strip of eight customer names of a design-handoff product set as type alone, each in its own typeface treatment, with no icons, cells or lines but the page's top rule.

  • Pro

    Split Linked Cells Logos

    Splits

    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.

All 100 logos blocks