Logo Carousel

Docs

Logo Carousel

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

The best are already here

Join new cult

"use client"
 
import React from "react"
 
import { GradientHeading } from "../ui/gradient-heading"
import LogoCarousel from "../ui/logo-carousel"
 
export function LogoCarouselDemo() {
  return (
    <div className="space-y-8  py-24">
      <div className="w-full max-w-screen-lg mx-auto flex flex-col items-center space-y-8">
        <div className="text-center">
          <GradientHeading variant="secondary">
            The best are already here
          </GradientHeading>
          <a href="https://www.newcult.co" target="_blank">
            <GradientHeading size="xxl">Join new cult</GradientHeading>
          </a>
        </div>
 
        <LogoCarousel columnCount={3} />
      </div>
    </div>
  )
}

Installation

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

Usage

import { LogoCarousel } from "@/components/ui/logo-carousel"

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

Stripe Bg Guides 3D Carousel