Logo Cloud
page.tsx
import LogoCloud from "@/components/logo-cloud";

​
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.