All components

Logo Cloud 1

Logo Cloud 1 is a React and Tailwind CSS marquee component from SmoothUI, licensed MIT. Copy it and paste it into your project.

SmoothUI MIT marquee

What it is

Logo Cloud 1 is a React and Tailwind CSS marquee component from SmoothUI, licensed MIT. Copy it and paste it into your project.

How to use it

Open it in the catalogue, press copy, and paste it into your project. The prompt you copy carries the code and the rules that tell your agent to reproduce it without changing anything.

Open in the catalogue

Five free copies a month. No card.

No packages beyond the project baseline

Licence

This component comes from SmoothUI and is redistributed under the MIT licence, which permits commercial use. The copyright notice travels with the code.

Logo Cloud 1

index.tsx
"use client";

import {
  Canpoy,
  Canva,
  Casetext,
  Clearbit,
  Descript,
  Duolingo,
  Faire,
  IDEO,
  KhanAcademy,
  Quizlet,
  Ramp,
  Strava,
} from "@/components/smoothui/shared";

const LOGOS = [
  <Canpoy key="1" />,
  <Canva key="2" />,
  <Casetext key="3" />,
  <Strava key="4" />,
  <Descript key="5" />,
  <Duolingo key="6" />,
  <Faire key="7" />,
  <Clearbit key="8" />,
  <IDEO key="9" />,
  <KhanAcademy key="10" />,
  <Quizlet key="11" />,
  <Ramp key="12" />,
];

interface LogoCloudSimpleProps {
  count?: number;
  description?: string;
  title?: string;
}

export function LogoCloudSimple({
  title = "You're in good company",
  description = "Trusted by leading teams from around the world",
  count = 4,
}: LogoCloudSimpleProps) {
  const logos = LOGOS.slice(0, count);

  return (
    <section className="bg-background py-16">
      <div className="mx-auto max-w-5xl px-6">
        <div className="mx-auto mb-12 max-w-xl text-balance text-center md:mb-16">
          <h2 className="font-semibold text-4xl">{title}</h2>
          <p className="mt-4 text-lg text-muted-foreground">{description}</p>
        </div>
        <div className="mx-auto grid max-w-5xl grid-cols-2 items-center gap-8 md:grid-cols-4">
          {logos.map((logo) => (
            <div
              className="flex items-center justify-center opacity-60 transition-opacity duration-200 *:fill-foreground hover:opacity-100"
              key={logo.key}
            >
              {logo}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default LogoCloudSimple;

Similar components