Logo Cloud

Component 3

About

Logo cloud with a GitHub-style contribution graph and two counter-scrolling marquee rows of tech logos.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Logo Cloud to your project and fits it to your theme.

Code

How Logo Cloud is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import LogoCloud, { type BrandLogo } from '@/components/ui/logo-cloud'

const brandLogos: BrandLogo[] = Array.from({ length: 20 }, (_, index) => {
  const position = String(index + 1).padStart(2, '0')

  return {
    image: `https://cdn.shadcnstudio.com/ss-assets/template/landing-page/zolt/logo-${position}.png`,
    name: `Tech stack logo ${position}`
  }
})

const settings = {
  username: '@zolt_mercer',
  summary: '864 contributions in the template timeline',
  duration: 25
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }

  return <LogoCloud brandLogos={brandLogos} username={s.username} summary={s.summary} duration={s.duration} />
}