{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "logo-cloud-categorized-grid", "title": "Logo Cloud Categorized Grid", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/logo-cloud-categorized-grid/LogoCloudCategorizedGrid.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Brain, Building2, Cloud, Globe, Quote, ShieldCheck, Terminal, X } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ninterface CustomerEntity {\n id: string\n name: string\n category: 'cloud' | 'devtools' | 'fintech' | 'ai'\n tier: string\n scale: string\n quote: string\n author: string\n title: string\n}\n\nconst customerList: CustomerEntity[] = [\n // Infrastructure & Cloud\n {\n id: 'cloudflare',\n name: 'Cloudflare',\n category: 'cloud',\n tier: 'Enterprise Scale',\n scale: '300+ Edge Data Centers',\n quote:\n 'UIPKGE allowed us to standardize our internal console UI across 40+ engineering squads with zero bundle overhead.',\n author: 'Alex K.',\n title: 'Principal Architect, Cloudflare Workers',\n },\n {\n id: 'flyio',\n name: 'Fly.io',\n category: 'cloud',\n tier: 'Core Partner',\n scale: '50k+ Compute Machines',\n quote: 'We copy the raw SFC components and style them directly to match our brand — no package upgrades to fight.',\n author: 'Sam T.',\n title: 'Lead Frontend Engineer',\n },\n {\n id: 'railway',\n name: 'Railway',\n category: 'cloud',\n tier: 'Growth Tier',\n scale: '1.5M Deployed Services',\n quote:\n 'AST-level source control gives our team complete confidence without ever fearing breaking upstream package releases.',\n author: 'Elena R.',\n title: 'VP of Product Experience',\n },\n\n // Developer Tooling\n {\n id: 'vercel',\n name: 'Vercel',\n category: 'devtools',\n tier: 'Design Pioneer',\n scale: '100M+ Monthly Visitors',\n quote:\n 'The level of keyboard ergonomics, focus ring layering, and spring physics in UIPKGE meets the highest craft benchmarks.',\n author: 'Rauno F.',\n title: 'Design Engineering Advisor',\n },\n {\n id: 'supabase',\n name: 'Supabase',\n category: 'devtools',\n tier: 'Ecosystem Partner',\n scale: '1M+ Databases Provisioned',\n quote: 'Dual-framework parity means we can ship both Vue and React examples for our developer docs in minutes.',\n author: 'Ant W.',\n title: 'Co-Founder & CEO',\n },\n {\n id: 'biome',\n name: 'BiomeJS',\n category: 'devtools',\n tier: 'Open Source',\n scale: '20M+ Weekly Downloads',\n quote: 'The cleanest AST code patterns in any modern UI registry. 100% type-safe.',\n author: 'Nico M.',\n title: 'Core Maintainer',\n },\n\n // Fintech & Security\n {\n id: 'stripe',\n name: 'Stripe',\n category: 'fintech',\n tier: 'Global Infrastructure',\n scale: '$1T+ Payment Volume',\n quote:\n 'Zero dependency bloat guarantees compliance with strict internal security and dependency auditing requirements.',\n author: 'Marcus H.',\n title: 'Staff Security Engineer',\n },\n {\n id: 'ramp',\n name: 'Ramp',\n category: 'fintech',\n tier: 'Scale Unicorn',\n scale: '$10B+ Managed Spend',\n quote: 'The dense KPI tiles and transaction workbenches are plug-and-play masterpieces.',\n author: 'David P.',\n title: 'Director of Frontend Engineering',\n },\n {\n id: 'snyk',\n name: 'Snyk Security',\n category: 'fintech',\n tier: 'Enterprise SecOps',\n scale: '2.5M+ Repos Scanned',\n quote: 'Owning the source code completely removes transitive dependency CVE vulnerabilities.',\n author: 'Sarah L.',\n title: 'Head of Developer Relations',\n },\n\n // AI & Machine Learning\n {\n id: 'replicate',\n name: 'Replicate',\n category: 'ai',\n tier: 'AI Infrastructure',\n scale: '500M+ Model Inferences',\n quote: 'We built our interactive prompt tester in an afternoon using UIPKGE terminal and slider primitives.',\n author: 'Ben F.',\n title: 'Co-Founder',\n },\n {\n id: 'modal',\n name: 'Modal Labs',\n category: 'ai',\n tier: 'GPU Cloud',\n scale: '10k+ GPU Clusters',\n quote: 'The tactile feel and speed of the UI blocks matches the lightning speed of our Python container runs.',\n author: 'Erik B.',\n title: 'Co-Founder & CTO',\n },\n {\n id: 'mistral',\n name: 'Mistral AI',\n category: 'ai',\n tier: 'Frontier AI',\n scale: 'Global Deployment',\n quote: 'Phenomenal attention to typographic hierarchy and clean Geist font metrics.',\n author: 'Arthur M.',\n title: 'Co-Founder',\n },\n]\n\ntype VerticalCategory = 'all' | 'cloud' | 'devtools' | 'fintech' | 'ai'\n\nexport interface LogoCloudCategorizedGridProps {\n className?: string\n}\n\nexport function LogoCloudCategorizedGrid({ className }: LogoCloudCategorizedGridProps) {\n const [selectedCategory, setSelectedCategory] = React.useState('all')\n const [activeModalCustomer, setActiveModalCustomer] = React.useState(null)\n\n const categoryLabels: Record = {\n all: { label: 'All Industries', icon: Globe },\n cloud: { label: 'Cloud & Infra', icon: Cloud },\n devtools: { label: 'DevTools & DX', icon: Terminal },\n fintech: { label: 'Fintech & Security', icon: ShieldCheck },\n ai: { label: 'AI & GPU Compute', icon: Brain },\n }\n\n const filteredCustomers = React.useMemo(() => {\n if (selectedCategory === 'all') return customerList\n return customerList.filter((c) => c.category === selectedCategory)\n }, [selectedCategory])\n\n return (\n \n
\n {/* Section Header */}\n
\n \n \n Industry Benchmark Customers\n \n

\n Powering the world's most rigorous engineering organizations.\n

\n

\n From frontier AI labs to global payment platforms, see how top tier engineering teams build on UIPKGE.\n

\n\n {/* Vertical Category Filter Tabs */}\n
\n {(Object.keys(categoryLabels) as VerticalCategory[]).map((catKey) => {\n const meta = categoryLabels[catKey]\n const Icon = meta.icon\n return (\n setSelectedCategory(catKey)}\n >\n \n {meta.label}\n \n )\n })}\n
\n
\n\n {/* Categorized Customer Grid */}\n
\n {filteredCustomers.map((customer) => (\n setActiveModalCustomer(customer)}\n >\n {/* Card Top: Name & Tier Pill */}\n
\n
\n
\n {customer.name.charAt(0)}\n
\n
\n

\n {customer.name}\n

\n

{customer.scale}

\n
\n
\n \n {customer.tier}\n \n
\n\n {/* Quote Excerpt */}\n

\n “{customer.quote}”\n

\n\n {/* Card Footer: Author & Read Case Study */}\n
\n {customer.author}\n \n Read quote\n \n \n
\n \n ))}\n
\n\n {/* Testimonial Detail Dialog Modal */}\n {activeModalCustomer && (\n
\n
\n
\n
\n
\n {activeModalCustomer.name.charAt(0)}\n
\n
\n

{activeModalCustomer.name}

\n

{activeModalCustomer.scale}

\n
\n
\n setActiveModalCustomer(null)}\n >\n \n \n
\n\n
\n \n

\n “{activeModalCustomer.quote}”\n

\n
\n\n
\n
\n

{activeModalCustomer.author}

\n

{activeModalCustomer.title}

\n
\n \n Verified Production Customer\n \n
\n
\n
\n )}\n
\n \n )\n}\nexport default LogoCloudCategorizedGrid\n", "type": "registry:block", "target": "~/components/blocks/LogoCloudCategorizedGrid.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/card.json" ], "description": "Categorized 4-industry logo & enterprise customer workbench with scale metrics, category filter tabs, and full testimonial modal inspect.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "logos" }