Skip to content
themes.dev
    Style: Wireframe

    Blocks

    23 free

    Style

    Blocks · Marketing

    Logo strip

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

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

    Used in UI Pro: Logo wall

    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/ui/r/logo-strip.json
    Astro
    npx shadcn@latest add https://www.themes.dev/ui/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 themes.dev UI 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>
  );
}