{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "retro-grid",
  "type": "registry:ui",
  "title": "Retro Grid",
  "description": "CSS-only perspective grid receding to the horizon — a synthwave landing-page backdrop.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/retro-grid.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Perspective grid background with retro/cyberpunk aesthetic.\n * @author Saasflare™\n * A CSS-only perspective grid that fades toward the horizon. Ideal for\n * hero sections and feature backgrounds.\n * @module packages/ui/components/ui/retro-grid\n * @package ui\n *\n * @component\n * @example\n * import { RetroGrid } from '@saasflare/ui';\n * <div className=\"relative min-h-[500px]\">\n *   <RetroGrid />\n *   <div className=\"relative z-10\">Hero content</div>\n * </div>\n *\n * @example\n * // Custom grid color and size\n * <RetroGrid gridColor=\"var(--primary)\" gridSize={40} angle={70} />\n */\n\nimport * as React from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Props for the RetroGrid component. */\nexport interface RetroGridProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Grid line color. Default: `\"var(--border)\"` */\n  gridColor?: string\n  /** Grid cell size in pixels. Default: `60` */\n  gridSize?: number\n  /** Perspective tilt angle in degrees. Default: `65` */\n  angle?: number\n  /** Grid line opacity (0–1). Default: `0.4` */\n  opacity?: number\n}\n\n/**\n * Perspective grid background with vanishing-point effect.\n *\n * - CSS-only (repeating linear gradients + perspective transform)\n * - Fades to transparent at the horizon via mask-image\n * - No JS, no canvas, no animation — pure visual\n *\n * @component\n * @package ui\n */\nexport function RetroGrid({\n  gridColor = \"var(--border)\",\n  gridSize = 60,\n  angle = 65,\n  opacity = 0.4,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: RetroGridProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      {...props}\n      className={cn(\"pointer-events-none absolute inset-0 overflow-hidden\", className)}\n      aria-hidden=\"true\"\n      data-slot=\"retro-grid\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n    >\n      <div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          backgroundImage: `\n            linear-gradient(to right, ${gridColor} 1px, transparent 1px),\n            linear-gradient(to bottom, ${gridColor} 1px, transparent 1px)\n          `,\n          backgroundSize: `${gridSize}px ${gridSize}px`,\n          opacity,\n          transform: `perspective(500px) rotateX(${angle}deg)`,\n          transformOrigin: \"bottom center\",\n          maskImage:\n            \"linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)\",\n          WebkitMaskImage:\n            \"linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%)\",\n        }}\n      />\n    </div>\n  )\n}\n",
      "target": "components/ui/retro-grid.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/retro-grid.json"
  }
}