{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "logo-cloud",
  "type": "registry:block",
  "title": "Logo cloud",
  "description": "A \"trusted by\" row of customer logos. Company names are available as text, so screen readers announce a list of names, not unlabelled images.",
  "categories": [
    "section"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/logo-mark.json",
    "https://facadeui.dev/r/section.json",
    "https://facadeui.dev/r/section-header.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/sections/logo-cloud.tsx",
      "type": "registry:component",
      "target": "components/sections/logo-cloud.tsx",
      "content": "/**\n * LogoCloud — a wall of customer or partner logos.\n *\n * Content-driven: pass `items` and, if you use `next/image` or `next/link`, pass\n * those components. The section itself imports no framework.\n *\n * a11y: the logos are a `<ul>`, because that is what they are — a list of\n * companies. Each `LogoMark` exposes its company name as text (visually hidden\n * unless `showNames`), so the wall reads as \"Northwind, Contoso, …\" instead of a\n * run of unlabelled images. When `title` is omitted the band renders as a `div`\n * rather than adding an unnamed region to the landmark list.\n *\n * Dependencies: react, @/lib/types, @/lib/utils,\n * @/components/ui/container, @/components/ui/logo-mark, @/components/ui/section,\n * @/components/ui/section-header.\n */\n\nimport type { ElementType } from \"react\"\n\nimport type {\n  ImageComponent,\n  LinkComponent,\n  ListSlotProps,\n  SectionBaseProps,\n} from \"@/lib/types\"\nimport { cn, slugId } from \"@/lib/utils\"\nimport { Container } from \"@/components/ui/container\"\nimport { LogoMark, type LogoItem } from \"@/components/ui/logo-mark\"\nimport { Section } from \"@/components/ui/section\"\nimport { SectionHeader } from \"@/components/ui/section-header\"\n\nexport interface LogoCloudProps extends SectionBaseProps, ListSlotProps {\n  items: LogoItem[]\n  /** Optional heading. Omit it for a plain strip under a hero. */\n  title?: string\n  eyebrow?: string\n  description?: string\n  image?: ImageComponent\n  link?: LinkComponent\n  /** Rendered logo height. */\n  size?: \"sm\" | \"md\" | \"lg\"\n  /** Show each company name as text beside its mark. */\n  showNames?: boolean\n  /** `row` wraps logos on a line. `grid` gives every logo equal width. */\n  layout?: \"row\" | \"grid\"\n  /** Shows logos in grey and faded until hover or focus. */\n  muted?: boolean\n}\n\nexport function LogoCloud({\n  items,\n  title,\n  eyebrow,\n  description,\n  image,\n  link,\n  size = \"md\",\n  showNames = false,\n  layout = \"row\",\n  muted = true,\n  listAs,\n  itemAs,\n  headingLevel = 2,\n  as,\n  spacing = \"sm\",\n  className,\n  id,\n}: LogoCloudProps) {\n  const List = (listAs ?? \"ul\") as ElementType\n  const Item = (itemAs ?? \"li\") as ElementType\n  const titleId = title ? (id ? `${id}-title` : slugId(title)) : undefined\n\n  return (\n    <Section\n      as={as ?? (title ? \"section\" : \"div\")}\n      spacing={spacing}\n      labelledBy={titleId}\n      id={id}\n      className={className}\n    >\n      <Container className=\"flex flex-col gap-10\">\n        {title ? (\n          <SectionHeader\n            align=\"center\"\n            size=\"sm\"\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            headingLevel={headingLevel}\n            titleId={titleId}\n          />\n        ) : null}\n\n        <List\n          className={cn(\n            layout === \"row\"\n              ? \"flex flex-wrap items-center justify-center gap-x-10 gap-y-8 sm:gap-x-14\"\n              : \"grid grid-cols-2 items-center justify-items-center gap-8 sm:grid-cols-3 lg:grid-cols-5\",\n          )}\n        >\n          {items.map((item) => (\n            <Item key={item.name}>\n              <LogoMark\n                {...item}\n                image={image}\n                link={link}\n                size={size}\n                muted={muted}\n                showName={showNames}\n              />\n            </Item>\n          ))}\n        </List>\n      </Container>\n    </Section>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Set headingLevel to fit the page outline (sections default to h2). Pass next/link and next/image through the link and image props. Docs: https://facadeui.dev/components/logo-cloud"
}