Landing Pages
Logo Carousel
Animated logo carousel for React and shadcn/ui that cycles brand SVGs through staggered columns, for customer and partner logos.
Updated
The best are already here
Join new cult
Logo Carousel is a React component for shadcn/ui animated with Motion. Use it on landing pages and marketing sites to show customers, partners, or integrations in a compact space.
Installation
pnpm dlx shadcn@latest add @cult-ui/logo-carousel
Usage
export default function LogoCarouselDemo() {
return <LogoCarousel />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columnCount | number | 2 | Number of columns to display logos in |
Examples
Default Two-Column Layout
<LogoCarousel />Custom Column Count
<LogoCarousel columnCount={3} />Adding Custom Logos
To add custom logos to the carousel, modify the allLogos array in the component:
const allLogos: Logo[] = [
{ name: "CustomLogo", id: 1, img: CustomLogoComponent },
// Add more logos...
];Each logo should implement the Logo interface:
interface Logo {
name: string;
id: number;
img: React.ComponentType<React.SVGProps<SVGSVGElement>>;
}Features
- Smooth animations using Framer Motion
- Automatic logo cycling with configurable columns
- Randomized logo distribution for visual variety
- SVG logo support with consistent sizing
- Responsive design that works across different screen sizes