GitHub
Open Github
Sign in

Logos Carousel

Animated carousel component that cycles through sets of logos with staggered animations.

Installation

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

Examples

Logo Count

Limit the number of logos displayed per row.

Usage

import { LogosCarousel } from "@/registry/spell-ui/logos-carousel";
<LogosCarousel count={4}>
  <YourLogo1 />
  <YourLogo2 />
  <YourLogo3 />
  <YourLogo4 />
  <YourLogo5 />
  <YourLogo6 />
</LogosCarousel>

Props

PropTypeDefault
children
React.ReactNode
-
stagger
number
0.14
count
number
-
className
string
-
duration
number
600
interval
number
2500
initialDelay
number
500
GitHub
Open Github
Sign in

Logos Carousel

Animated carousel component that cycles through sets of logos with staggered animations.

Installation

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

Examples

Logo Count

Limit the number of logos displayed per row.

Usage

import { LogosCarousel } from "@/registry/spell-ui/logos-carousel";
<LogosCarousel count={4}>
  <YourLogo1 />
  <YourLogo2 />
  <YourLogo3 />
  <YourLogo4 />
  <YourLogo5 />
  <YourLogo6 />
</LogosCarousel>

Props

PropTypeDefault
children
React.ReactNode
-
stagger
number
0.14
count
number
-
className
string
-
duration
number
600
interval
number
2500
initialDelay
number
500