{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "squiggle-arrow-demo",
  "type": "registry:component",
  "registryDependencies": [
    "squiggle-arrow"
  ],
  "files": [
    {
      "path": "registry/default/example/squiggle-arrow-demo.tsx",
      "content": "import SquigglyArrow from \"@/registry/default/ui/squiggle-arrow\"\n\nfunction SquigglyArrowDemo() {\n  return (\n    <main className=\"flex w-full flex-col items-center justify-center gap-12\">\n      <div className=\"flex flex-col items-center gap-12\">\n        <div className=\"flex flex-col gap-6\">\n          <h2 className=\"text-center text-2xl font-semibold\">Variants</h2>\n          <div className=\"flex flex-col gap-4\">\n            <div className=\"flex items-center gap-4\">\n              <span className=\"text-foreground w-24\">Wavy</span>\n              <SquigglyArrow variant=\"wavy\" />\n            </div>\n            <div className=\"flex items-center gap-4\">\n              <span className=\"text-foreground w-24\">Bouncy</span>\n              <SquigglyArrow variant=\"bouncy\" className=\"text-blue-500\" />\n            </div>\n            <div className=\"flex items-center gap-4\">\n              <span className=\"text-foreground w-24\">Smooth</span>\n              <SquigglyArrow variant=\"smooth\" className=\"text-purple-600\" />\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex flex-col gap-6\">\n          <h2 className=\"text-center text-2xl font-semibold\">Directions</h2>\n          <div className=\"flex flex-wrap justify-center gap-8 p-4\">\n            <div className=\"flex flex-col items-center gap-2\">\n              <span className=\"text-foreground\">Right</span>\n              <SquigglyArrow direction=\"right\" className=\"text-green-600\" />\n            </div>\n            <div className=\"flex flex-col items-center gap-2\">\n              <span className=\"text-foreground\">Left</span>\n              <SquigglyArrow direction=\"left\" className=\"text-orange-600\" />\n            </div>\n            <div className=\"flex flex-col items-center gap-2\">\n              <span className=\"text-foreground\">Down</span>\n              <SquigglyArrow direction=\"down\" className=\"text-pink-600\" />\n            </div>\n            <div className=\"flex flex-col items-center gap-2\">\n              <span className=\"text-foreground\">Up</span>\n              <SquigglyArrow direction=\"up\" className=\"text-cyan-600\" />\n            </div>\n          </div>\n        </div>\n\n        <div className=\"flex flex-col gap-6\">\n          <h2 className=\"text-center text-2xl font-semibold\">Sizes</h2>\n          <div className=\"flex items-center gap-8 overflow-x-auto p-4\">\n            <SquigglyArrow width={150} height={75} strokeWidth={2} />\n            <SquigglyArrow\n              width={250}\n              height={125}\n              strokeWidth={3}\n              className=\"text-blue-500\"\n            />\n            <SquigglyArrow\n              width={300}\n              height={150}\n              strokeWidth={4}\n              className=\"text-purple-600\"\n            />\n          </div>\n        </div>\n      </div>\n    </main>\n  )\n}\n\nexport default SquigglyArrowDemo\n",
      "type": "registry:component"
    }
  ]
}