{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mesh-gradient-background",
  "title": "Mesh Gradient Background",
  "description": "A container with a soft, flowing mesh gradient behind its content.",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "files": [
    {
      "path": "registry/shaders/mesh-gradient-background/mesh-gradient-background.tsx",
      "content": "import { MeshGradient } from \"@paper-design/shaders-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype MeshGradientBackgroundProps = React.ComponentProps<\"div\"> & {\n  colors?: string[]\n  distortion?: number\n  swirl?: number\n  speed?: number\n  grain?: number\n}\n\nfunction MeshGradientBackground({\n  colors = [\"#e0eaff\", \"#241d9a\", \"#f75092\", \"#9f50d3\"],\n  distortion = 0.8,\n  swirl = 0.1,\n  speed = 0.6,\n  grain = 0.15,\n  className,\n  children,\n  ...props\n}: MeshGradientBackgroundProps) {\n  return (\n    <div\n      data-slot=\"mesh-gradient-background\"\n      className={cn(\"relative isolate overflow-hidden\", className)}\n      {...props}\n    >\n      <MeshGradient\n        aria-hidden\n        className=\"absolute inset-0 -z-10 size-full\"\n        colors={colors}\n        distortion={distortion}\n        swirl={swirl}\n        speed={speed}\n        grainOverlay={grain}\n      />\n      {children}\n    </div>\n  )\n}\n\nexport { MeshGradientBackground }\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "backgrounds"
  ],
  "type": "registry:component"
}