Logo Stepper

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

Stripe

Shopify

Microsoft

Apple

Amazon

Installation

npx shadcn@latest add https://scrollxui.dev/registry/logo-stepper.json

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

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

Stripe

Shopify

Microsoft

Apple

Amazon

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.