{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-4",
  "title": "Alert 4",
  "description": "component for the alert-4",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "alert"
  ],
  "files": [
    {
      "path": "app/registry/alertfour.tsx",
      "content": "\"use client\";\n\nimport { Alert } from \"@/components/ui/alert\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"framer-motion\";\nimport { CircleDollarSign } from \"lucide-react\";\n\nexport default function Alert04() {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: -8 }}\n      animate={{ opacity: 1, y: 0 }}\n      className=\"w-full max-w-md mx-auto\"\n    >\n      <Alert\n        className={cn(\n          \"relative overflow-hidden\",\n          \"bg-white dark:bg-zinc-900\",\n          \"border border-emerald-100 dark:border-emerald-900/50\",\n          \"shadow-xs\",\n          \"p-4 rounded-xl\",\n        )}\n      >\n        <div className=\"flex items-center gap-4\">\n          <motion.div\n            initial={{ scale: 0.5 }}\n            animate={{ scale: 1 }}\n            className=\"shrink-0\"\n          >\n            <div\n              className={cn(\n                \"w-10 h-10 rounded-full\",\n                \"bg-emerald-50 dark:bg-emerald-950/50\",\n                \"flex items-center justify-center\",\n                \"ring-8 ring-emerald-50/50 dark:ring-emerald-950/25\",\n              )}\n            >\n              <CircleDollarSign className=\"h-5 w-5 text-emerald-600 dark:text-emerald-400\" />\n            </div>\n          </motion.div>\n\n          <div className=\"flex-1 min-w-0\">\n            <motion.div\n              initial={{ opacity: 0, x: 10 }}\n              animate={{ opacity: 1, x: 0 }}\n              className=\"space-y-1\"\n            >\n              <div className=\"flex items-center gap-2\">\n                <h3 className=\"text-base font-medium text-emerald-900 dark:text-emerald-100\">\n                  You got paid!\n                </h3>\n                <span className=\"px-1.5 py-0.5 rounded-md text-xs font-medium bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300\">\n                  $2,400.00\n                </span>\n              </div>\n              <p className=\"text-sm text-emerald-600 dark:text-emerald-400\">\n                The payment has been processed and added to your account\n              </p>\n            </motion.div>\n          </div>\n        </div>\n\n        <div className=\"absolute inset-0 pointer-events-none\">\n          <div className=\"absolute -left-2 -top-2 w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900/25 blur-2xl opacity-50\" />\n          <div className=\"absolute -right-2 -bottom-2 w-24 h-24 rounded-full bg-emerald-100 dark:bg-emerald-900/25 blur-2xl opacity-50\" />\n        </div>\n      </Alert>\n    </motion.div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/spectrumui/alertfour.tsx"
    }
  ],
  "type": "registry:component"
}