gamma logo

1

Logo Cloud

PreviousNext

A responsive grid layout displaying brand logos with optional overlay icons.

Installation

pnpm dlx shadcn@latest add @gammaui/logo-cloud

Usage

import { LogoCloud } from "@/components/ui/logo-cloud"
 
export default function Example() {
  return <LogoCloud className="my-12" />
}

This will display a responsive grid of branded logos with optional decorative icons.

Props

PropTypeDefaultDescription
classNamestring—Extra Tailwind classes applied to the wrapper div.
...propsReact.HTMLProps<HTMLDivElement>—All native div props are passed through.

Logo Object Shape

type Logo = {
  src: string
  alt: string
  width?: number
  height?: number
}

Component Features

  • Responsive grid (2 columns → 4 columns on desktop)
  • Dark mode support
  • Decorative plus icons using Tabler Icons
  • Optimized image loading
  • Easy to extend with additional logos
  • Works inside any layout

Example: Adding Custom Logos

import { LogoCloud } from "@/components/ui/logo-cloud"
 
const logos = [
  {
    src: "/brands/tesla.svg",
    alt: "Tesla Logo",
  },
  {
    src: "/brands/apple.svg",
    alt: "Apple Logo",
  },
]
 
export default function Example() {
  return (
    <LogoCloud className="border-y">
      {logos.map((logo, index) => (
        <img
          key={index}
          src={logo.src}
          alt={logo.alt}
          className="h-6 dark:brightness-0 dark:invert"
        />
      ))}
    </LogoCloud>
  )
}

Tips

  • You can pass child components to place badges or extra icons.
  • Use high-resolution SVGs for best quality.
  • This component works great as a partners section or homepage trust section.