Componentdata0.57 KB gzipZero dependencies

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

Open in StackBlitz

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

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

Usage guidance

Use LogoCloud when a ticket stub surface needs Grid or marquee row of monogram logo tiles in dashed frames with hover reveal. Keep props minimal and prefer composition with sibling stubs.

Avoid LogoCloud for long form flows or dense data grids where a dedicated layout block fits better.

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[]
scrolling?	boolean
className?	string