Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Monogram Tiles Static Grid Wall Logos Block for React

Sixteen square monogram tiles for a wildfire-risk mapping product in a narrow framed panel with + corner marks, each tile naming its customer on hover.

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 monogram logo wall for React with Base UI. Under a centred header, "Trusted by 1,200 forest districts", sixteen square tiles sit in a narrow max-w-4xl frame with + marks at its corners, the tiles sharing their hairlines. Each tile is a short monospaced monogram (initials, brackets, slashes, a trailing dot) muted until hovered, when it lifts a little and the customer's name appears under it. Eight tiles across in two rows from sm; four across on a phone, showing the first twelve. Built from Guides, with CSS for the entrance and hover and your theme's tokens for every colour. For customers with no logo worth setting, or a wall that should stay quiet.

FAQ

How do I change the customers?

Edit CUSTOMERS at the top of the file: a name, the monogram text to show and a lettering (weight and tracking). Keep monograms to four characters or fewer; they are set in text-xl mono in tiles that are about 60 px wide on the smallest phone.

How many tiles should there be?

A multiple of eight, so the two rows of eight are full, and the phone count (PHONE_COUNT, twelve) a multiple of four. The wall's cells share hairlines through a gap-px bg-border grid, so a short last row would show the border colour as a block.

How does the name on hover work?

It is plain CSS inside the tile: a small invisible label that fades in on hover. Nothing is focusable, so there are no tab stops; every name is also sr-only text in its list item, and the monogram itself is hidden from assistive technology.

How is the frame drawn?

A box with max-w-4xl holds a Guides component with extend="sm" and marks="corners", which draws the outline, the small overshoot at each corner and the + marks. The tile grid sits inside it, inset from the page rails so the overshoot never touches them.

How is it marked up for screen readers?

The header is an h2 and the tiles are a list named "Customers", each item reading the customer's name. The monograms are not announced.

  • Pro

    Static Grid Wall Logos

    Walls

    A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.

  • 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

    Square Cell Wall Logos

    Walls

    A wall of twelve garden-shop customers in square cells that share their hairlines from rail to rail, each with a large icon, its name and a tiny line saying what kind of shop it is.

  • Pro

    Headline Cell Logo Wall

    Walls

    A wall whose headline is one of its cells, for a wholesale food-ordering product: a four by four grid in shared hairlines where a two-by-two cell holds the heading, a line and the Shine Button, and twelve wordmarks fill the rest.

  • Pro

    Single Marquee With Claim Logos

    Marquees

    A split strip for a code-search tool: a start cell with the claim "Trusted by 4,000+ teams" divided from a scrolling row of wordmarks that fades out toward a pause button.

  • Pro

    Centered Logo Cloud Hero

    Logos and social proof

    A compact centered hero for a planning tool: an announcement link, two calls to action and a trusted-by band across the column of eight customer wordmarks in cells that share their hairlines.

All 100 logos blocks