Docs·Logo Cloud 006

Logo Cloud 006

Case-study logo grid with hover-to-reveal study links.

Installation

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

Usage

Up to four logos per row on a bordered grid. Logos stay full color — on hover the cell background shifts to muted, the logo hides, and a case study link appears centered. Pass an array for multi-line titles with a muted second line, same as Logo Cloud 005.

API Reference

PropTypeDefault
titleOptional heading above the grid. Pass an array for multi-line titles with muted second lines.
string | string[]—
rowsArray of rows with up to four logo items each.
LogoCloud006Row[]—
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

Worked with

Top companies in the world who saw potential in us

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

export default function Page() {
  return (
    <LogoCloud006
      title={[
        "Worked with",
        "Top companies in the world who saw potential in us",
      ]}
      rows={[
        [
          {
            name: "Trello",
            logo: <TrelloLogo />,
            href: "/case-studies/trello",
          },
          {
            name: "Stripe",
            logo: <StripeLogo />,
            href: "/case-studies/stripe",
          },
        ],
      ]}
    />
  )
}