Docs·Logo Cloud 002

Logo Cloud 002

Data-driven logo cloud that auto-groups logos and cycles them with spring blur transitions.

Installation

$pnpm dlx shadcn@latest add @spiderui/logo-cloud-002

Usage

Pass a flat logos array — the component chunks it into groups of three and cycles with spring blur/scale transitions via AnimatePresence.

API Reference

PropTypeDefault
logosLogo entries with a display name and SVG node.
LogoCloud002Item[]—
labelOptional uppercase heading above the row.
string—
durationSeconds each group stays visible before cycling.
number2.5
classNameClasses on the outer section.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Trusted by teams using

Claude
Nvidia
Clerk
import { LogoCloud002 } from "@/components/ui/logo-cloud-002"
const logos = [
  { name: "Vercel", svg: <VercelLogo /> },
  { name: "Stripe", svg: <StripeLogo /> },
  { name: "Clerk", svg: <ClerkLogo /> },
  { name: "Bolt", svg: <BoltLogo /> },
]

export default function Page() {
  return <LogoCloud002 logos={logos} label="Trusted by teams using" />
}