Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Split Framed Grid Logos Block for React

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.

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 a building-model viewer, "Every model, one link away", one sentence and a Shine Button. At the end, six architecture studios open in two columns and three rows inside a hairline frame whose lines run a little past its corners and carry + marks. There is no divider and no line between the customers: the frame is the only line between the two parts, so the figure floats. Each customer is a wordmark, an icon and a name in its own lettering, muted until you hover it. On a phone the copy comes first and the frame follows under it. Built from Guides and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For a features section that closes on its proof.

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 six: two columns and three rows fill the frame. The names are short on purpose, so they fit a cell two across at 320 pixels. They are fictional placeholders for your own customers.

How is the frame drawn?

A Guides layer inside a relative box draws the four sides with a short overshoot at each corner and a + mark on each one, the same hairline and mark as the page's rails. The customers sit inside with no lines of their own, and the frame is inset from the page's rails so its overshoot never touches them.

What happens in a right-to-left layout?

The layout mirrors: the copy stays at the start of the line and the frame at the end. The frame and its marks are symmetric, and each wordmark keeps its own direction, as a logo would.

How does it fit on a phone?

The copy comes first, then the frame at the full width of the column with the customers two across and three down. The frame keeps its overshoot inside the page's rails, and nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The copy and the frame 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

    Icon Circles Static Grid Wall Logos

    Walls

    Sixteen customers of a password manager as icon-only circles in one framed figure, with the customer named in a label on hover and as text for screen readers.

  • Pro

    Split Open Grid Logos

    Splits

    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.

  • Pro

    Split Tall Tiles Logos

    Splits

    Four customers as tall tiles held apart at the start, each its own hairline box with a Since line, and a headline, one sentence and a Shine Button at the end.

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