Logo Stepper

logo showcase with names, smooth animations, hover effects, and modern UI.

Installation

npx shadcn@latest add @scrollxui/logo-stepper

import { LogoStepper } from '@/components/ui/logo-stepper';

<LogoStepper
  logos={logos}
  direction='loop'
  animationDelay={1.2}
  animationDuration={0.6}
  visibleCount={5}
/>

logo showcase with names, smooth animations, hover effects, and modern UI.

Property	Type	Default	Description
`logos`	Array<{ icon: React.ReactNode; label: string }>	`required`	An array of logo objects, each containing an icon and a label to display.
`animationDuration`	number	`0.6`	Duration (in seconds) for the logo transition animation using Framer Motion.
`animationDelay`	number	`1.2`	Time delay (in seconds) between automatic transitions of the logo stepper.
`direction`	'loop' \| 'vloop'	`'loop'`	Determines the visiblity of loop
`visibleCount`	number	`5`	Number of logos visible at a time in the stepper viewport.