{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hover-gradient-navbar",
  "type": "registry:ui",
  "title": "Hover Gradient Navbar",
  "description": "A navigation bar with gradient hover effects and smooth transitions.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ruixenui/hover-gradient-navbar.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport { motion, Variants } from \"motion/react\";\nimport {\n  Home,\n  Settings,\n  Bell,\n  User,\n  Mail,\n  BarChart3,\n  HelpCircle,\n  LogOut,\n} from \"lucide-react\";\n\n// --- HoverGradientNavBar Component ---\n\ninterface HoverGradientMenuItem {\n  icon: React.ReactNode;\n  label: string;\n  href: string;\n  gradient: string;\n  iconColor: string;\n}\n\nconst menuItems: HoverGradientMenuItem[] = [\n  {\n    icon: <Home className=\"h-5 w-5\" />,\n    label: \"Home\",\n    href: \"#\",\n    gradient:\n      \"radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.06) 50%, rgba(29,78,216,0) 100%)\",\n    iconColor: \"group-hover:text-blue-500 dark:group-hover:text-blue-400\",\n  },\n  {\n    icon: <Mail className=\"h-5 w-5\" />,\n    label: \"Messages\",\n    href: \"#\",\n    gradient:\n      \"radial-gradient(circle, rgba(147,51,234,0.15) 0%, rgba(126,34,206,0.06) 50%, rgba(88,28,135,0) 100%)\",\n    iconColor: \"group-hover:text-purple-500 dark:group-hover:text-purple-400\",\n  },\n  {\n    icon: <Settings className=\"h-5 w-5\" />,\n    label: \"Settings\",\n    href: \"#\",\n    gradient:\n      \"radial-gradient(circle, rgba(59,130,246,0.15) 0%, rgba(37,99,235,0.06) 50%, rgba(29,78,216,0) 100%)\",\n    iconColor: \"group-hover:text-blue-500 dark:group-hover:text-blue-400\",\n  },\n  {\n    icon: <User className=\"h-5 w-5\" />,\n    label: \"Profile\",\n    href: \"#\",\n    gradient:\n      \"radial-gradient(circle, rgba(239,68,68,0.15) 0%, rgba(220,38,38,0.06) 50%, rgba(185,28,28,0) 100%)\",\n    iconColor: \"group-hover:text-red-500 dark:group-hover:text-red-400\",\n  },\n  {\n    icon: <HelpCircle className=\"h-5 w-5\" />,\n    label: \"Help\",\n    href: \"#\",\n    gradient:\n      \"radial-gradient(circle, rgba(20,184,166,0.15) 0%, rgba(13,148,136,0.06) 50%, rgba(15,118,110,0) 100%)\",\n    iconColor: \"group-hover:text-teal-500 dark:group-hover:text-teal-400\",\n  },\n  {\n    icon: <LogOut className=\"h-5 w-5\" />,\n    label: \"Logout\",\n    href: \"#\",\n    gradient:\n      \"radial-gradient(circle, rgba(161,98,7,0.15) 0%, rgba(133,77,14,0.06) 50%, rgba(100,62,8,0) 100%)\",\n    iconColor: \"group-hover:text-amber-600 dark:group-hover:text-amber-400\",\n  },\n];\n\n// Animation variants\nconst itemVariants: Variants = {\n  initial: { rotateX: 0, opacity: 1 },\n  hover: { rotateX: -90, opacity: 0 },\n};\n\nconst backVariants: Variants = {\n  initial: { rotateX: 90, opacity: 0 },\n  hover: { rotateX: 0, opacity: 1 },\n};\n\nconst glowVariants: Variants = {\n  initial: { opacity: 0, scale: 0.8 },\n  hover: {\n    opacity: 1,\n    scale: 2,\n    transition: {\n      opacity: { duration: 0.5, ease: [0.4, 0, 0.2, 1] },\n      scale: { duration: 0.5, type: \"spring\", stiffness: 300, damping: 25 },\n    },\n  },\n};\n\nconst sharedTransition = {\n  type: \"spring\" as const,\n  stiffness: 100,\n  damping: 20,\n  duration: 0.5,\n};\n\nfunction HoverGradientNavBar(): React.JSX.Element {\n  return (\n    <div className=\"fixed bottom-0 left-0 w-full md:bottom-4 md:left-1/2 md:-translate-x-1/2 z-50\">\n      <motion.nav\n        className=\"w-full md:w-fit mx-auto px-2 md:px-4 py-2 md:py-3 rounded-none md:rounded-3xl \n        bg-white/90 dark:bg-black/80 backdrop-blur-lg \n        border-t md:border border-gray-200/80 dark:border-gray-800/80 \n        shadow-lg md:shadow-xl relative\"\n        initial=\"initial\"\n        whileHover=\"hover\"\n      >\n        <ul className=\"flex items-center justify-around md:justify-center gap-1 md:gap-3 relative z-10\">\n          {menuItems.map((item: HoverGradientMenuItem) => (\n            <motion.li\n              key={item.label}\n              className=\"relative flex-1 md:flex-none\"\n            >\n              <motion.div\n                className=\"block rounded-xl md:rounded-2xl overflow-visible group relative\"\n                style={{ perspective: \"600px\" }}\n                whileHover=\"hover\"\n                initial=\"initial\"\n              >\n                {/* Per-item glow */}\n                <motion.div\n                  className=\"absolute inset-0 z-0 pointer-events-none rounded-xl md:rounded-2xl\"\n                  variants={glowVariants}\n                  style={{\n                    background: item.gradient,\n                    opacity: 0,\n                  }}\n                />\n                {/* Front-facing */}\n                <motion.a\n                  href={item.href}\n                  className=\"flex flex-col md:flex-row items-center justify-center gap-0.5 md:gap-2 \n                  px-2 py-1.5 md:px-4 md:py-2 relative z-10 \n                  bg-transparent text-gray-600 dark:text-gray-300 \n                  group-hover:text-gray-900 dark:group-hover:text-white \n                  transition-colors rounded-xl md:rounded-2xl text-xs md:text-sm\"\n                  variants={itemVariants}\n                  transition={sharedTransition}\n                  style={{\n                    transformStyle: \"preserve-3d\",\n                    transformOrigin: \"center bottom\",\n                  }}\n                >\n                  <span\n                    className={`transition-colors duration-300 ${item.iconColor}`}\n                  >\n                    {item.icon}\n                  </span>\n                  <span className=\"hidden md:inline font-medium\">\n                    {item.label}\n                  </span>\n                </motion.a>\n                {/* Back-facing */}\n                <motion.a\n                  href={item.href}\n                  className=\"flex flex-col md:flex-row items-center justify-center gap-0.5 md:gap-2 \n                  px-2 py-1.5 md:px-4 md:py-2 absolute inset-0 z-10 \n                  bg-transparent text-gray-600 dark:text-gray-300 \n                  group-hover:text-gray-900 dark:group-hover:text-white \n                  transition-colors rounded-xl md:rounded-2xl text-xs md:text-sm\"\n                  variants={backVariants}\n                  transition={sharedTransition}\n                  style={{\n                    transformStyle: \"preserve-3d\",\n                    transformOrigin: \"center top\",\n                    transform: \"rotateX(90deg)\",\n                  }}\n                >\n                  <span\n                    className={`transition-colors duration-300 ${item.iconColor}`}\n                  >\n                    {item.icon}\n                  </span>\n                  <span className=\"hidden md:inline font-medium\">\n                    {item.label}\n                  </span>\n                </motion.a>\n              </motion.div>\n            </motion.li>\n          ))}\n        </ul>\n      </motion.nav>\n    </div>\n  );\n}\n\nexport default HoverGradientNavBar;\n",
      "type": "registry:ui",
      "target": "components/ruixen/hover-gradient-navbar.tsx"
    }
  ]
}