Logo Cloud
A beautiful logo cloud section for showcasing your clients or partners with a smooth marquee animation.Copy Markdown
Preview
Default (V1)
A sleek endless scrolling marquee for displaying logos in bordered boxes.
Minimalist (V2)
A large, minimalist icon-only marquee with grayscale-to-color transition on hover.
Glassmorphic Dual-Row (V3)
A premium dual-row marquee with glassmorphic cards and reverse motion paths.
Installation
The fastest way to get started is using the CLI:
# For LogoCloudV1 Variant
npx shadcn@latest add @nurav-ui/logo-cloud-v1
# For LogoCloudV2 Variant
npx shadcn@latest add @nurav-ui/logo-cloud-v2
# For LogoCloudV3 Variant
npx shadcn@latest add @nurav-ui/logo-cloud-v3You can also use the direct URL method without configuring the registry:
npx shadcn@latest add https://nurav-ui.vercel.app/r/logo-cloud-{version}.jsonExamples
Horizontal with Custom Speed
Control the animation speed by adjusting the speed prop. Lower values result in faster scrolling.
<LogoCloud speed={20} />Vertical Marquee
Display logos in a vertical scrolling pattern instead of horizontal.
<LogoCloud direction="vertical" speed={35} />Custom Logos
Pass your own logo data with custom icons or images to the component.
const customLogos = [
{ name: "Custom App", icon: <YourIcon /> },
{ name: "Another App", icon: <AnotherIcon /> },
];
<LogoCloud logos={customLogos} />Responsive Variants
Each version (V1, V2, V3) has different characteristics:
- V1: Best for desktop with bordered cards, hover effects, and text labels
- V2: Minimalist icon-only design with grayscale-to-color hover transition
- V3: Premium glassmorphic dual-row layout with backdrop blur
API Reference
LogoCloud Props (V1)
LogoCloudV2 Props
LogoCloudV3 Props
Built with inline default logos. To customize, modify the DEFAULT_LOGOS constant in the component.
Features
- Seamless Looping: Multiple repeated logo sets ensure smooth infinite scrolling
- Hover Effects: Interactive hover states for desktop users with pause and scale effects
- Responsive: Works on all screen sizes with flexible layouts
- Performance: Optimized animations using Framer Motion with linear easing
- Dark Mode Support: Full dark mode compatibility with automatic color adjustments
- Multiple Variants: Choose from bordered (V1), minimalist (V2), or glassmorphic (V3) designs
- Customizable: Easy to customize with your own logos, speeds, and styling
