Logo Cloud

A centered row of client or partner logos with an optional title.

Trusted by teams at

AcmeInitechGlobexSoylentUmbrellaHooli

import { LogoCloud } from '@/foundations/blocks/logo-cloud';

const Placeholder = ({ children }: { children: string }) => (
  <span className="font-semibold text-2xl">{children}</span>
);

export default function LogoCloudPreview() {
  return (
    <LogoCloud
      title="Trusted by teams at"
      logos={[
        { logo: <Placeholder>Acme</Placeholder>, name: 'Acme' },
        { logo: <Placeholder>Initech</Placeholder>, name: 'Initech' },
        { logo: <Placeholder>Globex</Placeholder>, name: 'Globex' },
        { logo: <Placeholder>Soylent</Placeholder>, name: 'Soylent' },
        { logo: <Placeholder>Umbrella</Placeholder>, name: 'Umbrella' },
        { logo: <Placeholder>Hooli</Placeholder>, name: 'Hooli' },
      ]}
    />
  );
}

export const meta = {
  layout: 'fullscreen',
};

Dependencies

Container

Source Code

import { Container } from '@/components/container';
import { cn } from '@/lib/utils/classnames';

interface LogoCloudItem {
  /** Logo node — usually an `<img>` or inline `<svg>`. */
  logo: React.ReactNode;
  /** Optional alt label, used as a Tooltip-style title. */
  name?: string;
  /** Optional href — wraps the logo in an `<a>`. */
  href?: string;
}

interface LogoCloudProps
  extends Omit<React.ComponentPropsWithRef<'section'>, 'title'> {
  /** Small title above the row, usually one line. */
  title?: React.ReactNode;
  logos: LogoCloudItem[];
}

const LogoCloud = ({
  ref,
  className,
  title,
  logos,
  ...rest
}: LogoCloudProps) => (
  <section
    ref={ref}
    className={cn('w-full py-16 md:py-20', className)}
    {...rest}
  >
    <Container>
      {title && (
        <p className="text-center text-foreground-secondary text-lg">{title}</p>
      )}
      <div
        className={cn(
          'flex flex-wrap items-center justify-center gap-x-12 gap-y-8 p-6',
          title && 'mt-8'
        )}
      >
        {logos.map((item, i) => {
          const Wrapper = item.href ? 'a' : 'span';
          return (
            <Wrapper
              key={i}
              href={item.href}
              title={item.name}
              className={cn(
                'flex h-9 items-center text-foreground-secondary',
                'transition-opacity duration-(--duration-hover) ease-out',
                item.href && 'hover:opacity-70'
              )}
            >
              {item.logo}
            </Wrapper>
          );
        })}
      </div>
    </Container>
  </section>
);

export type { LogoCloudItem, LogoCloudProps };
export { LogoCloud };

LogoCloud is the “trusted by” strip — a centered, flex-wrapping row of logos with an optional title. Logos are passed as ReactNodes so you can inline SVGs, use <img>, or compose multi-piece marks.

Anatomy


          <LogoCloud
  title="Trusted by teams at"
  logos={[
    { logo: <img src="/acme.svg" alt="Acme" />, name: 'Acme', href: 'https://acme.example' },
    { logo: <img src="/initech.svg" alt="Initech" />, name: 'Initech' },
  ]}
/>

API Reference

Extends the section element.

Prop	Default	Type
`title`	-	`ReactNode`
`logos *`	-	`LogoCloudItem[]`

LogoCloudItem


          interface LogoCloudItem {
  logo: React.ReactNode;
  name?: string;
  href?: string;
}

Examples

Default

Trusted by teams at

AcmeInitechGlobexSoylentUmbrellaHooli

import { LogoCloud } from '@/foundations/blocks/logo-cloud';

const Placeholder = ({ children }: { children: string }) => (
  <span className="font-semibold text-2xl">{children}</span>
);

export default function LogoCloudPreview() {
  return (
    <LogoCloud
      title="Trusted by teams at"
      logos={[
        { logo: <Placeholder>Acme</Placeholder>, name: 'Acme' },
        { logo: <Placeholder>Initech</Placeholder>, name: 'Initech' },
        { logo: <Placeholder>Globex</Placeholder>, name: 'Globex' },
        { logo: <Placeholder>Soylent</Placeholder>, name: 'Soylent' },
        { logo: <Placeholder>Umbrella</Placeholder>, name: 'Umbrella' },
        { logo: <Placeholder>Hooli</Placeholder>, name: 'Hooli' },
      ]}
    />
  );
}

export const meta = {
  layout: 'fullscreen',
};

Hero

Stat Grid