Premium & Brand

Logo Carousel

Animated hero logo carousel with reduced-motion fallback.

Import

tsx

import { LogoCarousel } from "@cooud-ui/ui";

bash

npx cooud-ui add logo-carousel

Examples

Hero lockup

Large ghost logos that rotate in place for launch pages, waitlists and social-proof heroes. Each slot cross-fades upward with Motion, pauses on hover/focus and becomes static for reduced-motion users.

The best teams are already here

Join Cooud UI

Installation

Add the component with the CLI or copy the dependencies and source manually.

Copy the registry item into your app with its source-owned dependencies.

bash

npx cooud-ui add logo-carousel

tsx

const logos = [
  {
    id: "stripe",
    label: "Stripe",
    node: <span className="text-5xl font-black text-[#635bff]">stripe</span>,
  },
  {
    id: "bmw",
    label: "BMW",
    node: <span className="grid size-16 place-items-center rounded-full bg-white text-sm font-black text-black">BMW</span>,
  },
  {
    id: "typescript",
    label: "TypeScript",
    node: <span className="grid size-16 place-items-center rounded-md bg-[#3178c6] text-3xl font-black text-white">TS</span>,
  },
  {
    id: "next",
    label: "Next.js",
    node: <span className="grid size-16 place-items-center rounded-full border-2 border-fg text-3xl font-semibold">N</span>,
  },
];

<section className="flex flex-col items-center gap-8 py-12 text-center">
  <div className="space-y-2">
    <p className="font-display text-2xl font-semibold text-fg">
      The best teams are already here
    </p>
    <h3 className="font-display text-6xl font-semibold leading-none text-fg">
      Join Cooud UI
    </h3>
  </div>
  <LogoCarousel items={logos} columns={3} ariaLabel="Customer logos" />
</section>

API Reference

Generated from the component's exported types.

LogoCarouselProps

Extends HTMLAttributes<HTMLUListElement>

Prop	Type	Default	Description
`items`*	`LogoCarouselItem[]`	—	—
`columns`	`number`	—	—
`columnCount`	`number`	—	Alias kept for snippets that call this pattern `columnCount`.
`interval`	`number`	`2200`	—
`staggerDelay`	`number`	`0.07`	—
`pauseOnHover`	`boolean`	`true`	—
`ariaLabel`	`string`	`"Logo carousel"`	—
`variant`	`LogoCarouselVariant`	`"ghost"`	—
`size`	`LogoCarouselSize`	`"lg"`	—
`motionPreference`	`LogoCarouselMotionPreference`	`"user"`	—
`itemClassName`	`string`	—	—
`logoClassName`	`string`	—	—