{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-grid-background",
  "title": "Dot Grid Background",
  "description": "A container with a crisp dot grid that fades out towards the edges.",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "files": [
    {
      "path": "registry/shaders/dot-grid-background/dot-grid-background.tsx",
      "content": "import { DotGrid, type DotGridProps } from \"@paper-design/shaders-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype DotGridBackgroundProps = React.ComponentProps<\"div\"> & {\n  colorBack?: string\n  colorFill?: string\n  /** Dot diameter, in px. */\n  size?: number\n  /** Distance between dots, in px. */\n  gap?: number\n  shape?: DotGridProps[\"shape\"]\n  /** Fade the grid out towards the edges of the container. */\n  fade?: boolean\n}\n\nfunction DotGridBackground({\n  colorBack = \"#09090b\",\n  colorFill = \"#3f3f46\",\n  size = 2,\n  gap = 24,\n  shape = \"circle\",\n  fade = true,\n  className,\n  children,\n  style,\n  ...props\n}: DotGridBackgroundProps) {\n  return (\n    <div\n      data-slot=\"dot-grid-background\"\n      className={cn(\"relative isolate overflow-hidden\", className)}\n      style={{ backgroundColor: colorBack, ...style }}\n      {...props}\n    >\n      <DotGrid\n        aria-hidden\n        className={cn(\n          \"absolute inset-0 -z-10 size-full\",\n          fade &&\n            \"mask-radial-from-40% mask-radial-to-80% mask-radial-at-center\"\n        )}\n        colorBack=\"#00000000\"\n        colorFill={colorFill}\n        colorStroke=\"#00000000\"\n        size={size}\n        gapX={gap}\n        gapY={gap}\n        shape={shape}\n      />\n      {children}\n    </div>\n  )\n}\n\nexport { DotGridBackground }\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "backgrounds"
  ],
  "type": "registry:component"
}