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
"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 };
Part of Prism UI — browse the full library on 21st.dev.