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

Contact

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