NewAI SDK Agents

Logo Carousel

PreviousNext

An animated carousel component for displaying brand logos with smooth transitions.

The best are already here

Join new cult

Installation

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

Usage

export default function LogoCarouselDemo() {
  return <LogoCarousel />
}

Props

PropTypeDefaultDescription
columnCountnumber2Number 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