Docs·Logo Cloud 001

Logo Cloud 001

Composable logo cloud with grouped children, staggered blur fades, and automatic group cycling.

Installation

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

Usage

Compose one or more LogoCloudGroup children. The cloud cycles groups on a timer with staggered blur fade-out and fade-in per item. Bring your own SVGs — svgl is a good source for brand marks.

API Reference

PropTypeDefault
labelOptional heading above the logo row (LogoCloud).
string""
displayDurationMilliseconds each group stays visible before cycling (LogoCloud).
number2000
fadeDurationFade transition duration in seconds (LogoCloud).
number0.6
staggerDelayPer-item stagger delay in seconds (LogoCloud).
number0.08
classNameClasses on the outer section (LogoCloud).
string—
iconLogo SVG or image node (LogoCloudItem).
ReactNode—
nameBrand label beside the icon (LogoCloudItem).
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

Claude
Nvidia
Clerk
Bolt
Stripe
import {
  LogoCloud,
  LogoCloudGroup,
  LogoCloudItem,
} from "@/components/ui/logo-cloud-001"
export default function Page() {
  return (
    <LogoCloud label="Trusted by">
      <LogoCloudGroup>
        <LogoCloudItem icon={<VercelLogo />} name="Vercel" />
        <LogoCloudItem icon={<StripeLogo />} name="Stripe" />
        <LogoCloudItem icon={<ClerkLogo />} name="Clerk" />
      </LogoCloudGroup>
      <LogoCloudGroup>
        <LogoCloudItem icon={<LinearLogo />} name="Linear" />
        <LogoCloudItem icon={<BoltLogo />} name="Bolt" />
      </LogoCloudGroup>
    </LogoCloud>
  )
}