Logos Carousel

Vercel

Next.js

React

shadcn/ui

Installation

CommandManual

pnpmnpmyarnbun

pnpm dlx shadcn@latest add @cortexcn/logos-carousel

Usage

import { LogosCarousel } from "@/components/logos-carousel";

<LogosCarousel className="h-16" columnCount={4}>
  <img src="/logos/vercel.svg" alt="Vercel" />
  <img src="/logos/nextjs.svg" alt="Next.js" />
  <img src="/logos/react.svg" alt="React" />
  <img src="/logos/stripe.svg" alt="Stripe" />
  {/* ...more logos */}
</LogosCarousel>

Each child is one logo. Logos are spread across the columns in order, so with 12 logos and 4 columns each column cycles through 3 logos. Give the carousel a height so the logos have room to animate.

Examples

Right to left

Set direction="rtl" to start the wave from the last column.

Vercel

Next.js

React

shadcn/ui

<LogosCarousel className="h-16" direction="rtl">  {logos.map((logo) => (    <Logo key={logo.name} {...logo} />  ))}</LogosCarousel>

View Code

Fewer columns

columnCount controls how many logos are visible at once. It is capped at the number of logos.

Vercel

Next.js

React

<LogosCarousel className="h-16" columnCount={3}>  {logos.map((logo) => (    <Logo key={logo.name} {...logo} />  ))}</LogosCarousel>

View Code

Behavior

• The carousel only cycles while it is on screen and the browser tab is visible.
• With reduced motion enabled, logos cross-fade in place instead of sliding and blurring.
• Set the --column-count CSS variable to change the visible columns at a breakpoint, for example className="[--column-count:2] md:[--column-count:4]".

Props