{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-gradient-border",
  "type": "registry:component",
  "title": "Animated Gradient Border",
  "author": "Toby Belhome",
  "description": "An Animated Gradient Border is a decorative ui element that displays moving color gradients around a component’s edge.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "examples/motion/components/animated-gradient-border/01/gradient-border.tsx",
      "content": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type Props = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nexport default function GradientBorder({ children, className }: Props) {\n  return (\n    <div\n      className={cn(\n        \"animate-border overflow-hidden rounded-xl border border-transparent [background:linear-gradient(45deg,transparent,transparent_50%,transparent)_padding-box,conic-gradient(from_var(--border-angle),transparent_80%,_theme(colors.indigo.500)_86%,_theme(colors.indigo.700)_90%,_theme(colors.indigo.500)_94%,_theme(colors.slate.600/.48))_border-box]\",\n        className\n      )}>\n      {children}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/animated-gradient-border/gradient-border.tsx"
    },
    {
      "path": "examples/motion/components/animated-gradient-border/01/page.tsx",
      "content": "import GradientBorder from \"./gradient-border\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport default function GradientBorderCardExample() {\n  return (\n    <GradientBorder>\n      <Card className=\"w-[300px]\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <div className=\"flex flex-col gap-6\">\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"email\">Email</Label>\n                <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n              </div>\n              <div className=\"grid gap-2\">\n                <Label htmlFor=\"password\">Password</Label>\n                <Input id=\"password\" type=\"password\" required />\n              </div>\n            </div>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n        </CardFooter>\n      </Card>\n    </GradientBorder>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/animated-gradient-border/animated-gradient-border-example.tsx"
    }
  ],
  "meta": {
    "isPro": false
  }
}