Logos Carousel
Cycle through logos column by column in a staggered wave.
- Dependencies (1)
Use cases
- Sponsors section on a home page.
- Social proof row on a landing page.
- Client logos in a portfolio or case study.
Installation
pnpm dlx shadcn@latest add @ncdai/logos-carousel
Usage
import { LogosCarousel } from "@/components/logos-carousel"<LogosCarousel>
<Logo />
<Logo />
<Logo />
</LogosCarousel>Accessibility
Reduced motion
When prefers-reduced-motion is on, the slide and blur transitions are replaced by a plain opacity cross-fade. The logos still cycle, so no logo is dropped.
Auto-updating content
The carousel cycles indefinitely, pausing only while the page is hidden or the carousel is off screen. WCAG 2.2.2 Pause, Stop, Hide asks for a way to pause, stop, or hide auto-updating content that runs alongside other content. Either add a pause control, or keep the carousel decorative and make sure the same logos are reachable somewhere static on the page.
API reference
LogosCarousel
Prop
Type
Credits
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.