# Logo strip (Caseroom block)

One line on who uses it, then the logos at one height and one colour, in rows that wrap evenly. Black and white, dark mode, shadcn-compatible; React, Astro and plain HTML.

29% of the 2,062 sites in The UI Index have a list (604 sites).

## Install

- React: `npx shadcn@latest add https://www.themes.dev/caseroom/r/logo-strip.json`
- Astro: `npx shadcn@latest add https://www.themes.dev/caseroom/r/astro/logo-strip.json`
- HTML: https://www.themes.dev/caseroom/r/html/logo-strip.html (with https://www.themes.dev/caseroom/r/html/caseroom.css)

Page: https://www.themes.dev/caseroom/blocks/logo-strip/ · Rules for agents: https://www.themes.dev/caseroom/AGENT.md

## Code

### logo-strip.astro

```astro
---
import { cn } from '@/lib/utils';
import { logoStrip as c, type Logo } from './logo-strip.classes';

interface Props {
  title: string;
  logos: Logo[];
  class?: string;
}
const { title, logos, class: className } = Astro.props;
---

<section class={cn(c.root, className)} aria-label={title}>
  <div class={c.inner}>
    <p class={c.title}>{title}</p>
    <ul class={c.list}>
      {logos.map((l) => <li class={c.item}><img src={l.src} alt={l.name} class={c.logo} loading="lazy" decoding="async" height="28" /></li>)}
    </ul>
  </div>
</section>
```

### logo-strip.classes.ts

```tsx
/** A logo strip: one line about who uses the product, then the logos in one row that wraps evenly (two, three or
 *  six to a row), all at one height and in one colour (currentColor on SVGs, or a black mark inverted in dark
 *  mode), so no logo shouts. */
export const logoStrip = {
  root: '@container bg-background px-6 py-14 text-foreground',
  inner: 'mx-auto max-w-6xl',
  title: 'text-center text-sm text-muted-foreground',
  list: 'mt-8 grid list-none grid-cols-2 items-center gap-x-8 gap-y-8 p-0 @md:grid-cols-3 @4xl:grid-cols-6',
  item: 'flex justify-center',
  logo: 'h-6 w-auto max-w-none opacity-80 @md:h-7 dark:invert [.inverted_&]:invert dark:[.inverted_&]:invert-0',
};
export type Logo = { name: string; src: string };
```

### logo-strip.tsx

```tsx
import { cn } from '@/lib/utils';
import { logoStrip as c, type Logo } from './logo-strip.classes';

export type LogoStripProps = { title: string; logos: Logo[]; className?: string };

/** A logo strip: one line, then the logos at one height and one colour, in rows that wrap evenly. */
export function LogoStrip({ title, logos, className }: LogoStripProps) {
  return (
    <section className={cn(c.root, className)} aria-label={title}>
      <div className={c.inner}>
        <p className={c.title}>{title}</p>
        <ul className={c.list}>
          {logos.map((l) => <li key={l.name} className={c.item}><img src={l.src} alt={l.name} className={c.logo} loading="lazy" decoding="async" height={28} /></li>)}
        </ul>
      </div>
    </section>
  );
}
```