Logo Carousel

Multi-column logo grid that cycles through sponsor logos with a staggered wave animation.

Installation

npx shadcn@latest add @iconiq/logo-carousal

File Structure

Usage

"use client";

import Image from "next/image";

import { LogosCarousel } from "@/components/ui/logo-carousal";

export function LogosCarouselPreview() {
  return (
    <LogosCarousel columnCount={4} className="w-full max-w-2xl gap-8">
      <Image src="/sponsors/vercel-light.svg" alt="Vercel" width={120} height={40} className="dark:hidden" />
      <Image src="/sponsors/vercel-dark.svg" alt="Vercel" width={120} height={40} className="hidden dark:block" />
      <Image src="/sponsors/Mintlify-light.svg" alt="Mintlify" width={120} height={40} className="dark:hidden" />
      <Image src="/sponsors/Mintlify-dark.svg" alt="Mintlify" width={120} height={40} className="hidden dark:block" />
      <Image src="/sponsors/wordmark-logo-green.svg" alt="Wordmark" width={120} height={40} />
    </LogosCarousel>
  );
}

Props

Description

LogosCarousel

children

Logo elements to cycle through. Each child is rendered as a single logo slot.

Type ReactNode

columnCount

Number of columns to spread logos across. Capped at the total number of logos.

Type number·Default 4

direction

Direction the ripple wave sweeps across columns: left-to-right or right-to-left.

Type "ltr" | "rtl"·Default "ltr"

className

Extra classes applied to the grid wrapper.

Type string

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.

Built by Edwin. Inspired by the inline testimonial layout from Rauno Freiberg.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.