Logo Cloud
page.tsx
import LogoCloud from '@/components/LogoCloud';

​
Properties

direction
'left' | 'right'
default: "'left'"

The direction in which the logos scroll.

speed
'fast' | 'normal' | 'slow'
default: "'normal'"

The speed of the logo animation.

pauseOnHover
boolean
default: "false"

Whether the animation pauses when the user hovers over the component.

playOnStart
boolean
default: "true"

Whether the animation starts automatically on component mount.

className
string

Additional CSS classes to apply to the component.

​
Usage

example.tsx
<LogoCloud
  direction="right"
  speed="fast"
  pauseOnHover={true}
  playOnStart={true}
/>

​
Tips

When customizing the Hero component:

  • Use high-quality, recognizable logos from reputable companies or partners
  • Ensure all logos are of similar dimensions for visual consistency
  • Consider using monochrome versions of logos for a more uniform look
  • Keep the title concise and impactful, e.g., “Trusted by Industry Leaders”

If you need basic components like buttons, inputs, and more, they are available with Shadcn UI.

Was this page helpful?

HeroOne-time Pricing