{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-card",
  "title": "Pricing Card",
  "description": "A focused pricing card layout with clear hierarchy.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "lucide-react",
    "@number-flow/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/pricing-card.tsx",
      "content": "\"use client\";\r\n\r\nimport {\r\n  Add01Icon,\r\n  MinusPlus01Icon,\r\n  MinusSignIcon,\r\n  Tick02Icon,\r\n  UserGroupIcon,\r\n  UserStoryIcon,\r\n} from \"@hugeicons/core-free-icons\";\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport NumberFlow from \"@number-flow/react\";\r\nimport { AnimatePresence, motion, LayoutGroup } from \"motion/react\";\r\nimport { useState } from \"react\";\r\n\r\n// Change Here\r\nconst plans = [\r\n  {\r\n    id: \"plus\",\r\n    name: \"Plus\",\r\n    description: \"solo\",\r\n    monthlyPrice: 8.99,\r\n    yearlyPrice: 6.99,\r\n    features: [\r\n      \"1TB of Space\",\r\n      \"30 days of file recovery\",\r\n      \"256-bit AES and SSL/TLS\",\r\n    ],\r\n  },\r\n  {\r\n    id: \"standard\",\r\n    name: \"Standard\",\r\n    description: \"startup\",\r\n    monthlyPrice: 12.99,\r\n    yearlyPrice: 9.99,\r\n    features: [\r\n      \"1TB of Space\",\r\n      \"30 days of file recovery\",\r\n      \"256-bit AES and SSL/TLS\",\r\n    ],\r\n  },\r\n  {\r\n    id: \"advanced\",\r\n    name: \"Advanced\",\r\n    description: \"teams\",\r\n    monthlyPrice: 24.99,\r\n    yearlyPrice: 19.99,\r\n    features: [\r\n      \"1TB of Space\",\r\n      \"30 days of file recovery\",\r\n      \"256-bit AES and SSL/TLS\",\r\n    ],\r\n  },\r\n];\r\n\r\nconst TRANSITION = {\r\n  type: \"spring\" as const,\r\n  stiffness: 300,\r\n  damping: 30,\r\n  mass: 0.8,\r\n};\r\n\r\nfunction PricingCard() {\r\n  const [billingCycle, setBillingCycle] = useState<\"monthly\" | \"yearly\">(\r\n    \"monthly\"\r\n  );\r\n  const [selectedPlan, setSelectedPlan] = useState(\"standard\");\r\n  const [userCount, setUserCount] = useState(3);\r\n\r\n  return (\r\n    <div className=\"w-full max-w-[450px] flex flex-col gap-6 p-5 px-4 sm:p-6 rounded-4xl sm:rounded-2xl border border-border bg-background shadow-sm transition-colors duration-300 not-prose\">\r\n      <div className=\"flex flex-col gap-4 mb-2\">\r\n        <h1 className=\"text-2xl font-semibold text-foreground tracking-tight\">\r\n          Select a Plan\r\n        </h1>\r\n\r\n        <div className=\"bg-muted p-1 h-10 w-full rounded-xl ring-1 ring-border flex\">\r\n          <button\r\n            onClick={() => setBillingCycle(\"monthly\")}\r\n            className={`flex-1 h-full rounded-lg text-base font-medium  relative transition-colors duration-300 ${\r\n              billingCycle === \"monthly\"\r\n                ? \"text-foreground\"\r\n                : \"text-muted-foreground hover:text-foreground\"\r\n            }`}\r\n          >\r\n            {billingCycle === \"monthly\" && (\r\n              <motion.div\r\n                layoutId=\"tab-bg\"\r\n                className=\"absolute inset-0 bg-background rounded-lg shadow-sm ring-1 ring-border\"\r\n                transition={TRANSITION}\r\n              />\r\n            )}\r\n            <span className=\"relative z-10\">Monthly</span>\r\n          </button>\r\n          <button\r\n            onClick={() => setBillingCycle(\"yearly\")}\r\n            className={`flex-1 h-full rounded-lg text-base font-medium relative transition-colors duration-300 flex items-center justify-center gap-2 ${\r\n              billingCycle === \"yearly\"\r\n                ? \"text-foreground\"\r\n                : \"text-muted-foreground hover:text-foreground\"\r\n            }`}\r\n          >\r\n            {billingCycle === \"yearly\" && (\r\n              <motion.div\r\n                layoutId=\"tab-bg\"\r\n                className=\"absolute inset-0 bg-background rounded-lg shadow-sm ring-1 ring-border\"\r\n                transition={TRANSITION}\r\n              />\r\n            )}\r\n            <span className=\"relative z-10\">Yearly</span>\r\n            <span className=\"relative z-10 bg-primary text-xs font-black px-1.5 py-0.5 rounded-full uppercase text-white tracking-tight whitespace-nowrap font-light\">\r\n              20% OFF\r\n            </span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"flex flex-col gap-3\">\r\n        {plans.map((plan) => {\r\n          const isSelected = selectedPlan === plan.id;\r\n          const price =\r\n            billingCycle === \"monthly\" ? plan.monthlyPrice : plan.yearlyPrice;\r\n\r\n          return (\r\n            <div\r\n              key={plan.id}\r\n              onClick={() => setSelectedPlan(plan.id)}\r\n              className=\"relative cursor-pointer\"\r\n            >\r\n              <div\r\n                className={`relative rounded-xl bg-card border border-foreground/10 transition-colors duration-300 ${\r\n                  isSelected ? \"z-10 border-primary border-2\" : \"\"\r\n                }`}\r\n              >\r\n                <div className=\"p-5\">\r\n                  <div className=\"flex justify-between items-start\">\r\n                    <div className=\"flex gap-4\">\r\n                      <div className=\"mt-1 shrink-0\">\r\n                        <div\r\n                          className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-300 ${\r\n                            isSelected\r\n                              ? \"border-primary\"\r\n                              : \"border-muted-foreground/15\"\r\n                          }`}\r\n                        >\r\n                          <AnimatePresence mode=\"wait\" initial={false}>\r\n                            {isSelected && (\r\n                              <motion.div\r\n                                initial={{ scale: 0 }}\r\n                                animate={{ scale: 1 }}\r\n                                exit={{ scale: 0 }}\r\n                                className=\"w-4 h-4 rounded-full bg-primary\"\r\n                                transition={{\r\n                                  type: \"spring\",\r\n                                  stiffness: 300,\r\n                                  damping: 25,\r\n                                  duration: 0.2,\r\n                                }}\r\n                              />\r\n                            )}\r\n                          </AnimatePresence>\r\n                        </div>\r\n                      </div>\r\n                      <div>\r\n                        <h3 className=\"text-lg font-medium text-foreground leading-tight\">\r\n                          {plan.name}\r\n                        </h3>\r\n                        <p className=\"text-sm text-muted-foreground lowercase\">\r\n                          {plan.description}\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                    <div className=\"text-right\">\r\n                      <div className=\"text-xl font-medium text-foreground\">\r\n                        <NumberFlow\r\n                          value={price}\r\n                          format={{ style: \"currency\", currency: \"USD\" }}\r\n                        />\r\n                      </div>\r\n                      <div className=\"text-xs text-muted-foreground/60 flex items-center justify-end gap-1 \">\r\n                        {billingCycle === \"monthly\" ? \"Month\" : \"Year\"}\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n\r\n                  <AnimatePresence initial={false}>\r\n                    {isSelected && (\r\n                      <motion.div\r\n                        initial={{ height: 0, opacity: 0 }}\r\n                        animate={{ height: \"auto\", opacity: 1 }}\r\n                        exit={{ height: 0, opacity: 0 }}\r\n                        transition={{\r\n                          duration: 0.4,\r\n                          ease: [0.32, 0.72, 0, 1],\r\n                        }}\r\n                        className=\"overflow-hidden w-full\"\r\n                      >\r\n                        <div className=\"pt-6 flex flex-col gap-6\">\r\n                          <div className=\"flex flex-col gap-3.5\">\r\n                            {plan.features.map((feature, idx) => (\r\n                              <motion.div\r\n                                initial={{ opacity: 0, y: 5 }}\r\n                                animate={{ opacity: 1, y: 0 }}\r\n                                transition={{\r\n                                  delay: idx * 0.05,\r\n                                  duration: 0.3,\r\n                                }}\r\n                                key={idx}\r\n                                className=\"flex items-center gap-3 text-sm text-foreground/80 \"\r\n                              >\r\n                                <HugeiconsIcon\r\n                                  icon={Tick02Icon}\r\n                                  size={16}\r\n                                  className=\"text-primary\"\r\n                                />\r\n                                {feature}\r\n                              </motion.div>\r\n                            ))}\r\n                          </div>\r\n\r\n                          <div className=\"h-px bg-muted\" />\r\n\r\n                          <div className=\"flex items-center justify-between\">\r\n                            <div className=\"flex items-center gap-3\">\r\n                              <div className=\"w-12 h-12 rounded-full bg-muted shrink-0 flex items-center justify-center\">\r\n                                <HugeiconsIcon\r\n                                  icon={UserStoryIcon}\r\n                                  size={30}\r\n                                  className=\"text-muted-foreground\"\r\n                                />\r\n                              </div>\r\n                              <div className=\"flex flex-col\">\r\n                                <span className=\"text-base font-medium  text-foreground leading-none\">\r\n                                  Users\r\n                                </span>\r\n                                <span className=\"text-sm text-muted-foreground mt-0.5\">\r\n                                  Starting at {userCount} users\r\n                                </span>\r\n                              </div>\r\n                            </div>\r\n\r\n                            <div className=\"flex items-center gap-4 bg-muted p-1.5 rounded-xl border border-border\">\r\n                              <button\r\n                                onClick={(e) => {\r\n                                  e.stopPropagation();\r\n                                  setUserCount(Math.max(1, userCount - 1));\r\n                                }}\r\n                                className=\"p-1.5 rounded-lg hover:bg-background hover:shadow-sm transition-all text-muted-foreground/60 hover:text-foreground active:scale-95\"\r\n                              >\r\n                                <HugeiconsIcon icon={MinusSignIcon} size={14} />\r\n                              </button>\r\n                              <span className=\"text-sm  w-4 text-center tabular-nums text-foreground/80\">\r\n                                <NumberFlow value={userCount} />\r\n                              </span>\r\n                              <button\r\n                                onClick={(e) => {\r\n                                  e.stopPropagation();\r\n                                  setUserCount(userCount + 1);\r\n                                }}\r\n                                className=\"p-1.5 rounded-lg hover:bg-background hover:shadow-sm transition-all text-muted-foreground/60 hover:text-foreground active:scale-95\"\r\n                              >\r\n                                <HugeiconsIcon icon={Add01Icon} size={16} />\r\n                              </button>\r\n                            </div>\r\n                          </div>\r\n                        </div>\r\n                      </motion.div>\r\n                    )}\r\n                  </AnimatePresence>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          );\r\n        })}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default PricingCard;\r\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}