Docs
Logo Grid

Logo Grid

A dynamic grid of logos with smooth fade transitions and hover pause functionality.

Installation

npx shadcn@latest add "https://www.layout.software/r/styles/default/logogrid.json"

Usage

import { Logo, LogoGrid } from "@/components/ui/logogrid"
<LogoGrid interval={3000} quantity={6}>
  <Logo src="/logos/logo1.png" alt="Company 1" />
  <Logo src="/logos/logo2.png" alt="Company 2" />
  <Logo src="/logos/logo3.png" alt="Company 3" />
  <Logo src="/logos/logo4.png" alt="Company 4" />
  <Logo src="/logos/logo5.png" alt="Company 5" />
  <Logo src="/logos/logo6.png" alt="Company 6" />
  <Logo src="/logos/logo7.png" alt="Company 7" />
  <Logo src="/logos/logo8.png" alt="Company 8" />
</LogoGrid>

Props

LogoGrid

The grid component accepts the following props:

  • interval (optional): Duration in milliseconds between logo transitions. Defaults to 3000.
  • quantity (optional): Number of logos to display at once. Defaults to 6.
  • children: Logo components to display in the grid.

The logo component accepts the following props:

  • src: Source URL for the logo image.
  • alt: Alt text for the logo image.
  • className (optional): Additional CSS classes to apply to the logo container.
Vertical TestimonialFounders Note