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.
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;