Prism UI

TRUSTED BY TEAMS FROM AROUND THE WORLD

The best are already here

The Logo Carousel component provides a smooth, animated way to showcase logos in multiple columns. Perfect for partner showcases, client logos, and brand displays with automatic cycling and responsive design.

Installation

Examples

Two Columns

Three Columns

Usage

Basic Usage

import { LogoCarousel } from "@/components/prismui/logo-carousel"
 
export default function Example() {
  return <LogoCarousel />
}

Custom Column Count

<LogoCarousel columns={3} />

Custom Logos

interface Logo {
  id: number
  name: string
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
}
 
const customLogos: Logo[] = [
  { 
    id: 1, 
    name: "CustomLogo", 
    icon: YourCustomLogoComponent 
  },
  // Add more logos...
]

Customization

Custom Animation Timing

// Adjust the CYCLE_DURATION constant in the component
const CYCLE_DURATION = 2000; // 2 seconds per logo

Custom Styling

<motion.div
  className="relative h-14 w-24 overflow-hidden md:h-24 md:w-48"
  // Customize dimensions and responsive behavior
>
  {/* ... */}
</motion.div>

Custom Animation Settings

<motion.div
  initial={{ y: "10%", opacity: 0 }}
  animate={{
    y: "0%",
    opacity: 1,
    transition: {
      type: "spring",
      stiffness: 300,
      damping: 20,
    },
  }}
>
  {/* ... */}
</motion.div>

Notes

Built with Framer Motion for smooth animations
Responsive design with mobile-first approach
Automatic logo cycling with configurable timing
Random logo distribution for variety
TypeScript support with proper types
SSR compatible with "use client" directive
Optimized performance with proper memoization
Supports reduced motion preferences
ARIA attributes for accessibility

Features

Smooth animations with spring physics
Automatic logo cycling
Responsive design
Random logo distribution
Multiple column support
TypeScript support
SSR compatibility
Accessibility features

Props

Prop	Type	Description	Default
columns	number	Number of columns to display	2

Logo Carousel