Marketing block

Bordered Logo Grid

Hairline-separated cells that hold still and show the whole set at once — the logo wall for a footer, a customers page, or anywhere the count is the claim.

89 linesNo dependenciesAdded 24 Aug 2026

logos
grid
social proof
customers
static

What's included

components/logo-grid.tsx
No runtime dependencies

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add logo-grid

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Trusted by teams shipping every day

Northwind
Contoso
Initech
Umbra
Lumon
Vandelay
Soylent
Aperture
Tyrell
Wayne
Cyberdyne
Stark

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/logo-grid.tsx

/**
 * <LogoGrid> — customer logos in bordered cells, holding still.
 *
 * <LogoCloud> is a marquee, and a marquee is a trade: it fits an unbounded
 * list into a fixed strip, and in exchange it never shows you all of it at
 * once and it moves. That trade is wrong in three places this block is for
 * — a footer, where perpetual motion at the bottom of every page is a
 * distraction the reader cannot dismiss; an about or customers page, where
 * the count *is* the claim and a crawl actively hides it; and anywhere the
 * section has to be legible in a screenshot or in print.
 *
 * The grid is `gap-px` over a bordered container, so every divider is one
 * physical pixel and neighbours share it rather than doubling. Cells are
 * uniform and the names are centred in them, which is what keeps a set of
 * wordmarks of wildly different lengths reading as a set.
 *
 * No animation at all, which is the point — there is nothing here for
 * `prefers-reduced-motion` to have an opinion about.
 *
 * Text wordmarks rather than images by default: a logo wall of remote SVGs
 * is a layout shift, a set of licences and a handful of requests, and the
 * shape reads identically without them. Pass `logos` as nodes when the real
 * marks are needed.
 */

import * as React from 'react'

export interface LogoGridProps {
  /** Wordmarks, or any node — an <img>, an inline <svg>. */
  logos?: React.ReactNode[]
  caption?: string
  /** Sits under the grid, e.g. a link to the customers page. */
  footnote?: React.ReactNode
  className?: string
}

const DEFAULT_LOGOS = [
  'Northwind',
  'Contoso',
  'Initech',
  'Umbra',
  'Lumon',
  'Vandelay',
  'Soylent',
  'Aperture',
  'Tyrell',
  'Wayne',
  'Cyberdyne',
  'Stark',
]

export function LogoGrid({
  logos = DEFAULT_LOGOS,
  caption = 'Trusted by teams shipping every day',
  footnote,
  className = '',
}: LogoGridProps) {
  return (
    <section
      className={`mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 ${className}`}
    >
      {caption ? (
        <p className="mb-8 text-center text-sm font-medium text-muted-foreground">
          {caption}
        </p>
      ) : null}

      {/* The container supplies the outer border and the ground the 1px
          gaps expose; each cell paints its own background over it. */}
      <ul className="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-border/60 bg-border/60 sm:grid-cols-3 lg:grid-cols-4">
        {logos.map((logo, i) => (
          <li
            key={i}
            className="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8"
          >
            <span className="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">
              {logo}
            </span>
          </li>
        ))}
      </ul>

      {footnote ? (
        <p className="mt-6 text-center text-sm text-muted-foreground">{footnote}</p>
      ) : null}
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Nothing to install. No component library, no icon package.
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/logo-grid.tsx and import it where you need the section:

import { LogoGrid } from '@/components/logo-grid'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`logos`Wordmarks, or any node — an <img>, an inline <svg>.	`React.ReactNode[]`	`DEFAULT_LOGOS`
`caption`	`string`	`'Trusted by teams shipping every day'`
`footnote`Sits under the grid, e.g. a link to the customers page.	`React.ReactNode`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

logo-grid.html

<!--
  Bordered Logo Grid — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 ">
  <p class="mb-8 text-center text-sm font-medium text-muted-foreground">Trusted by teams shipping every day</p>
  <ul class="grid grid-cols-2 gap-px overflow-hidden rounded-2xl border border-border/60 bg-border/60 sm:grid-cols-3 lg:grid-cols-4">
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Northwind</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Contoso</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Initech</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Umbra</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Lumon</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Vandelay</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Soylent</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Aperture</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Tyrell</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Wayne</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Cyberdyne</span>
    </li>
    <li class="flex min-h-24 min-w-0 items-center justify-center bg-card px-6 py-8">
      <span class="w-full truncate text-center text-lg font-semibold tracking-tight text-muted-foreground transition-colors hover:text-foreground">Stark</span>
    </li>
  </ul>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

3 more blocks in Logo Clouds

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Logo Clouds

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Logo Clouds blocks

View category

Seamless Logo Marquee

An infinite horizontal logo scroll with masked edges, a pause-on-hover affordance and a reduced-motion fallback that wraps instead of moving.

Logo Clouds83 linesNo deps

Under-Hero Logo Strip

One unbordered line of wordmarks beside a claim you can actually be wrong about, sized to sit under a hero without pushing the CTA down or moving while the headline is being read.

Logo Clouds95 lines1 dep10 Sept

Customers

Someone in your industry has already done this

Named with permission. Where a segment shows fewer logos than customers, the rest are under agreements that do not allow it.

Financial servicesand 40 more: Fieldstone
Meridian Capital
Umbra
Halden Trust
Healthcareand 18 more: Alcove Health
Coastline
Lumon Care
Logisticsand 12 more: Northwind Freight
Vandelay
Portside
Public sector: City of Ravel
Kestrel Authority

Logos Grouped by Industry

Customer logos under segment headings as a description list, with an “and 40 more” count for the ones under NDA — answers whether you have done this for someone like the reader, which a flat wall cannot.

Logo Clouds144 linesNo deps13 Sept