Logo Carousel

Component 415

About

Showcase your partners and build social proof with the Infinite Logo Carousel. This component is designed to be a flexible, plug-and-play solution for displaying a seamless, looping reel of brand logos. Key Features: Effortless Integration: Drop it into any React project. Works perfectly with the shadcn/ui ecosystem. Smooth Autoplay: Set it and forget it. The carousel loops infinitely with a configurable interval. Animated Title: Features a built-in TextRoll animation to give your section title a touch of modern flair. Highly Customizable: Easily adjust the number of logos, sizing, spacing, and animation speed directly through props. You can use the reliable default logos or pass in your own array. Perfect for "Trusted By" sections, client showcases, or any time you need to display a collection of brand logos in a clean and professional manner.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Logo Carousel to your project and fits it to your theme.

Code

How Logo Carousel is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AnimatedCarousel, LogoItem } from "@/components/ui/logo-carousel";

const partnerLogos = [
  {
    src: "https://cdn.21st.dev/assets/localized/f2cadfd0d3f726df66f2fbbb0e0c8ae9bbb83e9a4d3c740e2a676e5be2e4edea.svg",
    alt: "React",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/40/40f02dfc9c60459c7670e53e9a54b5f1de6b8d12b24f6d45a25479e2da59fc21.svg",
    alt: "Next.js",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/03/03dbe198e0dfdb9f78e2763add586a3d010b00b7a68015048622f917bef04169.svg",
    alt: "Vercel",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/33/336a54a4dc12d06bc9e74cc706c85e7e6d08a480f13d337ded91059af911d065.svg",
    alt: "TypeScript",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/0f/0f9b2cf2f1c1d14be858369dad32d61afce7fb0b75188b951d1493d83239c095.svg",
    alt: "Tailwind CSS",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/e4/e47867cdff61b667a78c3c20ceec285ea3179a060ba67bb6f791289bd838cd45.svg",
    alt: "Stripe",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/f0/f00e80e86e9962043ccc8e8b9ecbc4a69dae512c2718830f5ccae9abc0470cf1.svg",
    alt: "Notion",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/fa/fa93a6d5fb9a5f3ea05011d1ac568d057b73378fec7aafa38058b853741e9a49.svg",
    alt: "GitHub",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/e6/e6c96a9f9f8d6441007f3bc9b64aa4f400621e8269867aec59fb3f2075b953e1.svg",
    alt: "Figma",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/6d/6d7666c436e5f88a31276a5aa498ff878b548f3de8d2319e842a06595aa75a29.svg",
    alt: "Framer Motion",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/30/30dd96a911cc4d82e1843c6549ecf5ed2e5c0ce7c041bbd62217ffc47fe49eeb.svg",
    alt: "Storybook",
  },
  {
    src: "https://cdn.21st.dev/assets/mirror/c6/c65bc4e5b7fa2c5582537198fb640cd506be7957512f229b17101d1bcb2fee69.svg",
    alt: "Sanity",
  },
];

export function CarouselDemo() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <AnimatedCarousel
        title="Powering the Web"
        logos={partnerLogos.map((logo) => logo.src)}
        autoPlay={true}
        autoPlayInterval={4000}
        itemsPerViewMobile={3}
        itemsPerViewDesktop={5}
        logoContainerWidth="w-40"
        logoContainerHeight="h-20"
        logoImageWidth="w-auto"
        logoImageHeight="h-10"
      />
    </div>
  );
}

export default CarouselDemo;