Lambchop
Marketing

LogoGrid

Responsive logo grid with grayscale-to-color hover effect.

import { LogoGrid } from "lambchop";

Live Demo

lambgoat
noecho
ghost cult
metal insider

Usage

import { LogoGrid } from "lambchop";

<LogoGrid
  columns={4}
  logos={[
    { src: "/logos/lambgoat.svg", alt: "lambgoat" },
    { src: "/logos/noecho.svg", alt: "noecho" },
    { src: "/logos/ghostcult.svg", alt: "ghost cult" },
    { src: "/logos/metalinsider.svg", alt: "metal insider" },
  ]}
/>

Props

PropTypeDefaultDescription
logosArray<{ src: string; alt: string; href?: string }>Logo entries
columns3 | 4 | 5 | 64Number of grid columns
classNamestringAdditional CSS classes

Features

  • Grayscale by default, color on hover
  • Scale-110 hover animation
  • Responsive column breakpoints
  • Optional link wrapping per logo