# Logo cloud (goodtabs UI)

A static grid of customer marks on hairlines that rise from muted to full ink on hover.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/logo-cloud.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/logo-cloud`

## Usage

```tsx
import { LogoCloud } from "@/components/logo-cloud"

<LogoCloud title="Trusted by small teams" logos={[{ name: "Northwind", mark: <span>Northwind</span> }]} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `string` |  | Small mono line above the grid. |
| logos | `{ name: string; mark: ReactNode }[]` |  | Each mark is an SVG or styled text. The name is read by screen readers. |
| columns | `3 | 4 | 5` | `4` | Columns from sm up; two on a phone. |

## When to use

- Social proof under a hero
- When you have six or more recognisable customers

## When not to use

- With one or two customers, where a quote is stronger
- With a scrolling marquee; this one is static

## Notes for agents

- Server component; marks are decorative and hidden from assistive tech, name is in sr-only
- Pass currentColor marks so they follow the muted and hover tones
- Use only logos you have permission to show; the demos use invented names

Docs: https://ui.goodtabs.co/components/logo-cloud