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