Logos Swap

Features

• Pauses while the page is hidden or the logos are off screen.

Use cases

• Customer logos beside a sign-in form.
• Trusted-by row under a landing page hero.
• Sponsor row with more logos than fit at once.

Installation

pnpm dlx shadcn@latest add @ncdai/logos-swap

Usage

import { LogosSwap } from "@/components/logos-swap"

<LogosSwap>
  <Logo />
  <Logo />
  <Logo />
  <Logo />
  <Logo />
  <Logo />
</LogosSwap>

Pass more logos than columnCount, otherwise nothing swaps.

Set --column-count to wrap the logos onto fewer columns:

<LogosSwap
  columnCount={6}
  className="[--column-count:3] sm:[--column-count:6]"
/>

API reference

LogosSwap

Accessibility

• With prefers-reduced-motion, swapping stops at the first columnCount logos, so put the most important ones first.
• Screen readers only reach the logos on screen.
• The swap auto-updates, so WCAG 2.2.2 applies: add a pause control, or set aria-hidden and list every logo elsewhere.

Credits

• Claude Platform

License and usage

• Free to use and modify in both personal and commercial projects.
• Attribution is appreciated but not required.
• Released under the MIT License.