Docs·Logo Cloud 005

Logo Cloud 005

Bordered logo grid with grayscale-to-color hover, dimmed siblings, and company metadata reveal.

Installation

$pnpm dlx shadcn@latest add @spiderui/logo-cloud-005

Usage

Pass any number of rows with up to four logos each. Logos render in grayscale until hovered — then brand color returns, the cell background lifts to muted, sibling cells dim, and the company name plus established date appear in the top-left and bottom-right corners.

Bring your own SVGs or images. svgl is a good source for brand marks.

API Reference

PropTypeDefault
titleOptional heading above the grid. Pass an array for multi-line titles with muted second lines. On hover, company name shows top-left and est. date bottom-right.
string | string[]—
rowsArray of rows. Each row is an array of up to four logo items.
LogoCloud005Row[]—
dimOpacityOpacity applied to non-hovered cells while one is active.
number0.45
classNameClasses on the root section.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Trusted by experts

on the web.

import { LogoCloud005 } from "@/components/ui/logo-cloud-005"
import { LogoCloud005 } from "@/components/ui/logo-cloud-005"
import { StripeLogo, TrelloLogo } from "./logos"

export default function Page() {
  return (
    <LogoCloud005
      title={["Trusted by experts", "on the web."]}
      rows={[
        [
          { name: "TRELLO", est: "EST. 2011", logo: <TrelloLogo /> },
          { name: "STRIPE", est: "EST. 2010", logo: <StripeLogo /> },
        ],
      ]}
    />
  )
}