║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Logo Carousel description: An animated carousel component for displaying brand logos with smooth transitions. component: true

<ComponentPreview name="logo-carousel-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add https://cult-ui.com/r/logo-carousel.json

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the required dependencies:</Step>

npm install motion

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="logo-carousel" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║