# Logos Grid

> Wordmark cells in a hairline grid, muted until hovered.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/logos-grid).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/logos-grid
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/logos-grid-light-f87a9dcedd1d19cd.png
- Registry item: https://blockforge.terravidhal.me/r/logos-grid.json
- Categories: logos
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/logos-grid.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `registry/blocks/logos-grid.tsx`

```tsx
const brands = [
  { name: "Northwind", style: "font-serif italic" },
  { name: "VERTEX", style: "font-mono tracking-widest" },
  { name: "Bloom&Co", style: "font-semibold tracking-tight" },
  { name: "helios", style: "font-light lowercase tracking-wide" },
  { name: "PARALLAX", style: "font-black tracking-tighter" },
  { name: "Quill", style: "font-serif" },
  { name: "syntax_", style: "font-mono font-semibold" },
  { name: "Meridian", style: "font-medium tracking-wide" },
];

export default function LogosGrid() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-5xl px-6 py-16 sm:py-20">
        <p className="text-center text-sm text-muted-foreground">
          Powering product teams at
        </p>
        <div className="mt-8 grid grid-cols-2 overflow-hidden rounded-xl border border-border/60 sm:grid-cols-4">
          {brands.map((brand, index) => (
            <div
              key={brand.name}
              className={[
                "flex h-24 items-center justify-center bg-card text-lg text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground",
                index % 2 === 1 ? "border-l border-border/60" : "",
                index >= 2 ? "max-sm:border-t max-sm:border-border/60" : "",
                index % 4 !== 0 ? "sm:border-l sm:border-border/60" : "",
                index >= 4 ? "sm:border-t sm:border-border/60" : "",
              ].join(" ")}
            >
              <span className={brand.style}>{brand.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```