Skip to content
Caseroom

Caseroom

Components and blocks in black and white.

Blocks · Marketing

Logo strip

One line on who uses it, then the logos at one height and one colour, in rows that wrap evenly.

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

Used by teams that ship every day

  • Brightfold
  • Corvane
  • Halvard
  • Meadowlark
  • Northpine
  • Ostra

Both previews render the same markup; the HTML tab below is that markup without a framework.

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

Or copy the files below into your project. They need clsx, tailwind-merge and the components they import, and the Caseroom theme. The HTML needs only the compiled CSS.

logo-strip.classes.ts
/** 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
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>
  );
}