Componentdata

LogoCloud

Grid or marquee row of monogram logo tiles in dashed frames with hover reveal.

Preview

Live Preview

LOGO1

LOGO2

LOGO3

LOGO4

LOGO5

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add logo-cloud

Or install the full npm package:

npm install bigbullui

Usage

import { LogoCloud } from "@/components/ui/logo-cloud";

<LogoCloud logos={["ACME", "NOVA", "PULSE"]} scrolling />

Source code

logo-cloud.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

import * as React from "react";
import { cn } from "./lib/utils";

export interface LogoCloudProps {
  logos?: string[];
  scrolling?: boolean;
  className?: string;
}

export function LogoCloud({
  logos = [],
  scrolling = false,
  className,
}: LogoCloudProps) {
  const logoCount = logos.length || 6; // default set of placeholder logos
  const logoItems = Array.from({ length: logoCount }, (_, i) => `
    LOGO${i + 1}
  `.trim());

  return (
    <div
      className={cn(
        "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 motion-reduce:transition-none",
        className
      )}
    >
      {logoItems.map((logoText, i) => (
        <div
          key={i}
          className={cn(
            "group rounded-md border border-dashed border-border/60 p-3 text-center hover:opacity-90 hover transition-opacity",
            scrolling && "animate-[marquee_15s_linear_infinite]",
            className
          )}
        >
          <span className="text-[9px] font-mono text-muted-foreground uppercase tracking-[0.1em]">
            {logoText}
          </span>
        </div>
      ))}
    </div>
  );
}

Props

Prop	Type	Description
logos	string[]	Logo monogram labels.
scrolling	boolean	Marquee scrolling variant using the global marquee keyframe.
className	string	Additional classes.