Logo Cycle arranges brand logos in a grid of cells where each cell holds two logos mounted on counter-rotating pills. As the pills turn, the logos swap top and bottom positions in a loop that never repeats a frame awkwardly. Cell count, speed, and logos are props. Built with React and Tailwind CSS. A fresh alternative to a static logo wall for social proof sections and "trusted by" strips.
Installation
Usage
import { LogoCycle } from "@/components/ui/logo-cycle";<LogoCycle
pairs={[
{
top: <SiTailwindcss className="text-[#0DA5E9]" />,
bottom: <SiHtml5 className="text-[#DD4A25]" />,
},
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
pairs | LogoCyclePair[] | — | The logo pairs to swap in each cell. top shows first, bottom swaps in. |
columns | number | 3 | Number of columns in the grid. |
duration | number | 10 | Full swap cycle length, in seconds. |
iconSize | number | 24 | Icon size in px. |
className | string | — | Classes for the outer section. |