Logo Carousel

Component 132

About

A smooth, animated logo carousel component with support for multiple columns and customizable transitions. Features: • Smooth animations with spring physics • Automatic logo cycling • Responsive design • Random logo distribution • Multiple column support • TypeScript support • SSR compatibility • Accessibility features Notes: • Built with Framer Motion for smooth animations • Responsive design using a mobile-first approach • Automatic logo cycling with configurable timing • Random logo distribution for visual variety • TypeScript support with proper type definitions • SSR compatible using the "use client" directive • Optimized performance through proper memoization • Supports reduced motion preferences for accessibility • Includes ARIA attributes for improved accessibility

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

"use client";

import { LogoCarousel } from "@/components/ui/logo-carousel";
import { Card, CardContent } from "@/components/ui/card";

const demoLogos = [
  { id: 1, name: "Dub", src: "https://www.prismui.tech/logo/dub.svg" },
  { id: 2, name: "Supabase", src: "https://www.prismui.tech/logo/supabase.svg" },
  { id: 3, name: "Vercel", src: "https://www.prismui.tech/logo/vercel.svg" },
  { id: 4, name: "Resend", src: "https://www.prismui.tech/logo/resend.svg" },
  { id: 5, name: "Shadcn", src: "https://www.prismui.tech/logo/shadcn.svg" },
];

function LogoCarouselBasic() {
  return (
    <Card>
      <CardContent className="pt-6">
        <div className="text-center space-y-4 mb-12">
          <p className="text-sm font-medium tracking-widest text-muted-foreground">
            TRUSTED BY TEAMS FROM AROUND THE WORLD
          </p>
          <h2 className="text-[3.5rem] font-bold tracking-tight leading-none">
            The best are already here
          </h2>
        </div>
        <LogoCarousel logos={demoLogos} />
      </CardContent>
    </Card>
  );
}

export { LogoCarouselBasic };