Logo Carousel

The LogoCarousel component creates a seamless looping horizontal or vertical scroller. It is perfect for logo grids, client lists, text tickers, and horizontal image showcases.

Preview

"use client";

import React from "react";
import { LogoCarousel } from "@/registry/spark-ui/logo-carousel";

const LOGOS = [
  { name: "Cursor", path: "/logos/cursor.svg" },
  { name: "Descript", path: "/logos/descript.svg" },
  { name: "Discord", path: "/logos/discord.svg" },
  { name: "Duolingo", path: "/logos/duolingo.svg" },
  { name: "Framer", path: "/logos/framer.svg" },
  { name: "Google", path: "/logos/google.svg" },
  { name: "Linear", path: "/logos/linear.svg" },
  { name: "Netflix", path: "/logos/netflix.svg" },
  { name: "Notion", path: "/logos/notion.svg" },
  { name: "OpenAI", path: "/logos/openai.svg" },
  { name: "OpenSea", path: "/logos/opensea.svg" },
  { name: "Phantom", path: "/logos/phantom.svg" },
  { name: "Ramp", path: "/logos/ramp.svg" },
  { name: "Shopify", path: "/logos/shopify.svg" },
  { name: "Tesla", path: "/logos/tesla.svg" },
  { name: "Vercel", path: "/logos/vercel.svg" },
];

export default function LogoCarouselDemo() {
  return (
    <div className="relative flex w-full flex-col items-center justify-center overflow-hidden py-10">
      <LogoCarousel gap="4.5rem">
        {LOGOS.map((logo, idx) => (
          <img
            key={idx}
            src={logo.path}
            alt={logo.name}
            className="h-9 w-auto opacity-50 hover:opacity-100 transition-opacity duration-300 cursor-pointer logo-carousel-logo"
          />
        ))}
      </LogoCarousel>
    </div>
  );
}

Usage

Installation

$ npx shadcn@latest add https://spark-ui-olive.vercel.app/r/logo-carousel.json

Basic Example

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

export default function App() {
  return (
    <LogoCarousel className="[--duration:20s]">
      <img src="/logos/google.svg" alt="Google" className="h-9 w-auto" />
      <img src="/logos/vercel.svg" alt="Vercel" className="h-9 w-auto" />
      <img src="/logos/openai.svg" alt="OpenAI" className="h-9 w-auto" />
    </LogoCarousel>
  );
}

Reverse Direction

Here is the same Logo Carousel scrolling in the opposite direction (direction="right"):

Properties

Prop	Type	Default	Description
`duration`	`number`	`20`	The scrolling animation duration in seconds (lower values scroll faster).
`direction`	`"left" \| "right" \| "up" \| "down"`	`"left"`	The scrolling direction of the carousel items.
`reverse`	`boolean`	`false`	Combines with direction to reverse the scrolling trajectory (e.g. reverse left scrolls right).
`pauseOnHover`	`boolean`	`false`	If true, pauses the carousel animation when the user hovers over it.
`fade`	`boolean`	`true`	Adds a smooth linear gradient mask fade to the edges of the carousel.
`fadeAmount`	`number`	`10`	The percentage amount of the fade gradient width/height at the edges.
`repeat`	`number`	`2`	Number of duplicate copies of the list rendered internally to ensure a seamless looping effect.
`gap`	`string`	`"1.5rem"`	The spacing distance between elements inside the carousel scroller.