{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "logo-cloud-2", "title": "Integrations Logo Grid", "description": "Integration logo grid of twelve brand marks in muted cells, each showing an icon and name, beneath a heading and subtext.", "files": [ { "path": "registry/blocks/logo-cloud/2/logo-cloud-block.tsx", "content": "const logos = [\n { name: \"Amazon\", Icon: AmazonMark },\n { name: \"Microsoft\", Icon: MicrosoftMark },\n { name: \"Slack\", Icon: SlackMark },\n { name: \"GitHub\", Icon: GithubMark },\n { name: \"Notion\", Icon: NotionMark },\n { name: \"Figma\", Icon: FigmaMark },\n { name: \"Spotify\", Icon: SpotifyMark },\n { name: \"Dropbox\", Icon: DropboxMark },\n { name: \"LinkedIn\", Icon: LinkedinBoxMark },\n { name: \"Google\", Icon: GoogleMark },\n { name: \"Discord\", Icon: DiscordMark },\n { name: \"Dribbble\", Icon: DribbbleMark },\n]\n\nexport default function LogoCloudBlock() {\n return (\n
\n
\n
\n

\n Built to integrate with your stack\n

\n

\n Acme connects with the tools your team already relies on, no extra\n setup required.\n

\n
\n\n
\n {logos.map(({ name, Icon }) => (\n \n \n \n {name}\n \n
\n ))}\n
\n \n
\n )\n}\n\n// Brand marks are inlined rather than imported from an icon library, which\n// would drag a whole extra package into the consumer's install for a handful\n// of glyphs.\ntype MarkProps = React.ComponentProps<\"svg\"> & { size?: number | string }\n\nfunction AmazonMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction DiscordMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction DribbbleMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction DropboxMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction FigmaMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction GithubMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction GoogleMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction LinkedinBoxMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction MicrosoftMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction NotionMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction SlackMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n\nfunction SpotifyMark({ size = 24, ...props }: MarkProps) {\n return (\n \n \n \n )\n}\n", "type": "registry:component", "target": "components/blocks/logo-cloud-2.tsx" } ], "meta": { "height": "578px", "tier": "free" }, "categories": [ "logo-cloud" ], "type": "registry:block" }