Logo Carousel
An animated React component that displays logos in a rotating carousel with smooth transitions. Perfect for showcasing company logos, partners, or featured brands. this component is inspired from rauno's logo carousel component.
Live Preview
Installation
You can install the LogoCarousel component with the following CLI command, or copy the implementation manually:
1npx shadcn@latest add http://localhost:3000/r/logo-carousel.jsonImport
To use the LogoCarousel component, import it in your code:
1import LogoCarousel from '@/components/logo-carousel';Props
The LogoCarousel component accepts the following props:
| Prop | Type | Default | Description | Required |
|---|---|---|---|---|
logos | (string \| ReactNode)[] | - | Array of logos to display. Can be image URLs (strings) or React components/elements. | Yes |
delay | number | undefined | Optional delay in seconds for animation transitions. Useful when using multiple carousels with staggered animations. | No |
Example usage
Basic usage with image URLs
1<LogoCarousel
2 logos={[
3 'https://cdn.worldvectorlogo.com/logos/duolingo-black.svg',
4 'https://cdn.worldvectorlogo.com/logos/continental-logo-2.svg',
5 'https://cdn.worldvectorlogo.com/logos/great-clips-stores.svg',
6 ]}
7/>With React components
1import { Sony, Samsung, Instagram } from '@/icons';
2
3<LogoCarousel
4 logos={[
5 <Sony key="sony" />,
6 <Samsung key="samsung" />,
7 <Instagram key="instagram" />,
8 ]}
9/>Multiple carousels with staggered delays
1<div className="flex gap-10">
2 <LogoCarousel
3 logos={[...]}
4 />
5 <LogoCarousel
6 logos={[...]}
7 delay={0.1}
8 />
9 <LogoCarousel
10 logos={[...]}
11 delay={0.2}
12 />
13</div>