{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fade-slide-modal-shadcnui",
  "type": "registry:component",
  "title": "Fade & Slide Modal",
  "description": "Modal with fade backdrop and slide-up animation",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/modal/fade-slide.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { X } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function FadeSlideModal() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div className=\"flex items-center justify-center p-12\">\n      <button\n        onClick={() => setIsOpen(true)}\n        className=\"rounded-lg bg-accent px-8 py-3 font-semibold text-[var(--muted-foreground)] shadow-lg\"\n      >\n        Open Modal\n      </button>\n\n      <AnimatePresence>\n        {isOpen && (\n          <>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={() => setIsOpen(false)}\n              className=\"fixed inset-0 z-50 bg-black/50 backdrop-blur-sm\"\n            />\n            <motion.div\n              initial={{ opacity: 0, y: 20, scale: 0.95 }}\n              animate={{ opacity: 1, y: 0, scale: 1 }}\n              exit={{ opacity: 0, y: 20, scale: 0.95 }}\n              transition={{ type: \"spring\", damping: 25, stiffness: 300 }}\n              className=\"fixed bg-card left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-2xl border  bg-[var(--card-bg)] p-6 shadow-2xl\"\n            >\n              <div className=\"mb-4 flex items-center justify-between\">\n                <h2 className=\"text-2xl font-bold\">Modal Title</h2>\n                <button\n                  onClick={() => setIsOpen(false)}\n                  className=\"rounded-lg p-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800\"\n                >\n                  <X className=\"h-5 w-5\" />\n                </button>\n              </div>\n              <p className=\"mb-6 text-[var(--foreground)]/70\">\n                This is a beautiful modal with fade and slide animation.\n              </p>\n              <div className=\"flex justify-end gap-3\">\n                <button\n                  onClick={() => setIsOpen(false)}\n                  className=\"rounded-lg px-4 py-2 transition-colors hover:bg-gray-100 dark:hover:bg-gray-800\"\n                >\n                  Cancel\n                </button>\n                <button\n                  onClick={() => setIsOpen(false)}\n                  className=\"rounded-lg bg-accent px-4 py-2 text-[var(--muted-foreground)]\"\n                >\n                  Confirm\n                </button>\n              </div>\n            </motion.div>\n          </>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/fade-slide-modal-shadcnui.tsx"
    }
  ]
}