{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "staggered-dropdown-shadcnui",
  "type": "registry:component",
  "title": "Staggered Dropdown",
  "description": "Dropdown menu with staggered item animations",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/components/dropdown/staggered-items.tsx",
      "content": "\"use client\";\n\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport { ChevronDown } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst items = [\"Profile\", \"Settings\", \"Billing\", \"Team\", \"Logout\"];\n\nexport function StaggeredDropdown() {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div className=\"flex items-center justify-center p-12\">\n      <div className=\"relative\">\n        <button\n          onClick={() => setIsOpen(!isOpen)}\n          className=\"flex items-center gap-2 rounded-lg border  bg-[var(--card-bg)] px-4 py-2 shadow-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-800\"\n        >\n          Menu\n          <ChevronDown\n            className={`h-4 w-4 transition-transform ${\n              isOpen ? \"rotate-180\" : \"\"\n            }`}\n          />\n        </button>\n\n        <AnimatePresence>\n          {isOpen && (\n            <motion.div\n              initial={{ opacity: 0, y: -10 }}\n              animate={{ opacity: 1, y: 0 }}\n              exit={{ opacity: 0, y: -10 }}\n              transition={{ duration: 0.2 }}\n              className=\"absolute bg-card right-0 mt-2 w-48 overflow-hidden rounded-lg border  bg-[var(--card-bg)] shadow-xl\"\n            >\n              {items.map((item, index) => (\n                <motion.button\n                  key={item}\n                  initial={{ opacity: 0, x: -10 }}\n                  animate={{ opacity: 1, x: 0 }}\n                  transition={{ delay: index * 0.05 }}\n                  onClick={() => setIsOpen(false)}\n                  className=\"w-full px-4 py-2.5 text-left transition-colors hover:bg-gray-100 dark:hover:bg-gray-800\"\n                >\n                  {item}\n                </motion.button>\n              ))}\n            </motion.div>\n          )}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/uitripled/staggered-dropdown-shadcnui.tsx"
    }
  ]
}