{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bordered-clients-grid",
  "type": "registry:ui",
  "title": "Bordered Clients Grid",
  "description": "Five-column logo grid with subtle dividers, hover-tinted cells, and decorative cross markers at the four corners.",
  "dependencies": [],
  "files": [
    {
      "path": "registry/ruixenui/bordered-clients-grid.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ═══════════════════════════════════════════════════════════\n   Bordered Clients Grid — A 5-column wordmark grid with subtle\n   dividers, hover-tinted cells, and decorative cross markers\n   at the four outer corners.\n\n   Wordmarks render as typography (not images) — each brand has\n   distinct font weight, letter-spacing, case, and style to\n   capture its character. No external CDN dependency, fully\n   theme-aware via `currentColor`.\n\n   Override the `logos` prop with your own entries — either\n   styled text (matching the default API) or full ReactNodes\n   for SVG wordmarks if you want pixel-perfect brand typography.\n\n   Grid collapses 5 → 4 → 3 columns at lg → md → sm breakpoints.\n   ═══════════════════════════════════════════════════════════ */\n\nexport interface ClientLogo {\n  /** Display name; used as alt/key. */\n  name: string;\n  /** Override the rendered text (e.g., \"tailwindcss\" for Tailwind CSS). Defaults to `name`. */\n  label?: string;\n  /** Custom font family. Falls back to inherited sans. */\n  fontFamily?: string;\n  /** Font weight (100–900). Defaults to 600. */\n  fontWeight?: number;\n  /** Font size in pixels. Defaults to 18. */\n  fontSize?: number;\n  /** CSS letter-spacing (e.g., \"-0.04em\" or \"0.06em\"). */\n  letterSpacing?: string;\n  /** Italic typography. */\n  italic?: boolean;\n  /** Uppercase transform. */\n  uppercase?: boolean;\n  /** Optional anchor href. */\n  href?: string;\n  /** Escape hatch — render a custom node (e.g., an SVG) instead of styled text. */\n  node?: React.ReactNode;\n}\n\nexport interface BorderedClientsGridProps {\n  logos?: ClientLogo[];\n  className?: string;\n}\n\nconst DEFAULT_LOGOS: ClientLogo[] = [\n  {\n    name: \"NVIDIA\",\n    fontWeight: 900,\n    fontSize: 18,\n    letterSpacing: \"0.06em\",\n    uppercase: true,\n  },\n  {\n    name: \"OpenAI\",\n    fontWeight: 600,\n    fontSize: 22,\n    letterSpacing: \"-0.01em\",\n    fontFamily:\n      '\"Times New Roman\", ui-serif, Georgia, \"Liberation Serif\", serif',\n  },\n  {\n    name: \"GitHub\",\n    fontWeight: 700,\n    fontSize: 24,\n    letterSpacing: \"-0.025em\",\n  },\n  {\n    name: \"Tailwind CSS\",\n    label: \"tailwindcss\",\n    fontWeight: 600,\n    fontSize: 22,\n    letterSpacing: \"-0.04em\",\n  },\n  {\n    name: \"Vercel\",\n    fontWeight: 800,\n    fontSize: 24,\n    letterSpacing: \"-0.05em\",\n  },\n  {\n    name: \"Stripe\",\n    fontWeight: 700,\n    fontSize: 24,\n    letterSpacing: \"-0.025em\",\n  },\n  {\n    name: \"Linear\",\n    fontWeight: 600,\n    fontSize: 22,\n    letterSpacing: \"-0.04em\",\n  },\n  {\n    name: \"Cloudflare\",\n    fontWeight: 700,\n    fontSize: 18,\n    letterSpacing: \"-0.025em\",\n  },\n  {\n    name: \"Zapier\",\n    fontWeight: 800,\n    fontSize: 22,\n    letterSpacing: \"-0.025em\",\n  },\n  {\n    name: \"Laravel\",\n    fontWeight: 700,\n    fontSize: 22,\n    italic: true,\n    letterSpacing: \"-0.025em\",\n  },\n];\n\nexport default function BorderedClientsGrid({\n  logos = DEFAULT_LOGOS,\n  className,\n}: BorderedClientsGridProps) {\n  return (\n    <section\n      className={cn(\"bg-background py-16 md:py-24\", className)}\n      aria-label=\"Trusted by\"\n    >\n      <div className=\"mx-auto max-w-5xl px-6\">\n        <div className=\"relative\">\n          {/* Decorative cross markers at the four corners */}\n          <CornerCross className=\"left-0 top-0 -translate-x-1/2 -translate-y-1/2\" />\n          <CornerCross className=\"right-0 top-0 -translate-y-1/2 translate-x-1/2\" />\n          <CornerCross className=\"bottom-0 left-0 -translate-x-1/2 translate-y-1/2\" />\n          <CornerCross className=\"bottom-0 right-0 translate-x-1/2 translate-y-1/2\" />\n\n          <div className=\"grid grid-cols-2 divide-x divide-y border border-foreground/15 md:grid-cols-5\">\n            {logos.map((logo) => (\n              <div\n                key={logo.name}\n                className=\"flex items-center justify-center px-4 py-7 transition-colors hover:bg-foreground/5\"\n              >\n                <Wordmark logo={logo} />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction Wordmark({ logo }: { logo: ClientLogo }) {\n  if (logo.node) {\n    return <>{logo.node}</>;\n  }\n\n  const text = logo.label ?? logo.name;\n  const style: React.CSSProperties = {\n    fontFamily: logo.fontFamily,\n    fontWeight: logo.fontWeight ?? 600,\n    fontStyle: logo.italic ? \"italic\" : \"normal\",\n    fontSize: `${logo.fontSize ?? 18}px`,\n    letterSpacing: logo.letterSpacing,\n    textTransform: logo.uppercase ? \"uppercase\" : \"none\",\n    whiteSpace: \"nowrap\",\n    lineHeight: 1,\n  };\n\n  const inner = (\n    <span\n      className=\"text-foreground/65 transition-colors hover:text-foreground\"\n      style={style}\n    >\n      {text}\n    </span>\n  );\n\n  return logo.href ? (\n    <a href={logo.href} target=\"_blank\" rel=\"noopener noreferrer\">\n      {inner}\n    </a>\n  ) : (\n    inner\n  );\n}\n\nfunction CornerCross({ className }: { className?: string }) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\"pointer-events-none absolute size-3\", className)}\n    >\n      <span className=\"absolute inset-0 m-auto block h-px w-full bg-foreground/30\" />\n      <span className=\"absolute inset-0 m-auto block h-full w-px bg-foreground/30\" />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/bordered-clients-grid.tsx"
    }
  ]
}