{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast-notification-shadcnui",
  "type": "registry:page",
  "title": "Toast Notification",
  "description": "Animated toast notification popup",
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/page/notifications/toast-notification.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { CheckCircle2, X } from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport function ToastNotification() {\n  const [isVisible, setIsVisible] = useState(false);\n\n  const showToast = () => {\n    setIsVisible(true);\n    setTimeout(() => setIsVisible(false), 3000);\n  };\n\n  return (\n    <div className=\"flex items-center justify-center p-12\">\n      <Button onClick={showToast}>Show Notification</Button>\n\n      <AnimatePresence>\n        {isVisible && (\n          <motion.div\n            initial={{ opacity: 0, y: -50, scale: 0.9 }}\n            animate={{ opacity: 1, y: 0, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.9, transition: { duration: 0.2 } }}\n            className=\"fixed right-4 top-4 z-50\"\n          >\n            <Card className=\"flex w-80 items-start gap-3 p-4 shadow-2xl\">\n              <CheckCircle2 className=\"h-5 w-5 flex-shrink-0 text-green-500\" />\n              <div className=\"flex-1\">\n                <h4 className=\"font-semibold\">Success!</h4>\n                <p className=\"text-sm text-[var(--foreground)]/70\">\n                  Your changes have been saved.\n                </p>\n              </div>\n              <button\n                onClick={() => setIsVisible(false)}\n                className=\"flex-shrink-0 rounded-sm opacity-70 hover:opacity-100\"\n              >\n                <X className=\"h-4 w-4\" />\n              </button>\n            </Card>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n}\n",
      "type": "registry:page",
      "target": "components/uitripled/toast-notification-shadcnui.tsx"
    }
  ]
}