# Logo strip (themes.dev UI 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.

30% of the 2,073 sites in The UI Index have a list (612 sites).

## Install

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

Page: https://www.themes.dev/ui/blocks/logo-strip/ · Rules for agents: https://www.themes.dev/ui/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>
  );
}
```