{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-with-user-scaling",
  "type": "registry:ui",
  "title": "Pricing with User Scaling",
  "description": "A pricing component with user-based scaling and dynamic pricing calculations.",
  "dependencies": [
    "motion",
    "lucide-react",
    "clsx"
  ],
  "registryDependencies": [
    "button",
    "card",
    "slider"
  ],
  "files": [
    {
      "path": "registry/ruixenui/pricing-with-user-scaling.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { CheckIcon, Minus, Plus } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport cn from \"clsx\";\n\nexport interface Plan {\n  title: string;\n  monthlyPrice: number;\n  annuallyPrice: number;\n  desc: string;\n  features: string[];\n  buttonText: string;\n}\n\ninterface PricingWithUserScalingProps {\n  plans?: Plan[];\n  defaultBilling?: \"monthly\" | \"annual\";\n  defaultUsers?: number;\n}\n\nexport const DEFAULT_PLANS: Plan[] = [\n  {\n    title: \"Free\",\n    monthlyPrice: 0,\n    annuallyPrice: 0,\n    desc: \"Perfect to start with personal usage\",\n    features: [\n      \"20 volts per month\",\n      \"Roll over volts\",\n      \"Personal use license\",\n      \"Public generations\",\n      \"Plugins for Figma, Framer, Webflow\",\n    ],\n    buttonText: \"Get Started\",\n  },\n  {\n    title: \"Basic\",\n    monthlyPrice: 8,\n    annuallyPrice: Math.round(8 * 12 * 0.8),\n    desc: \"For growing teams\",\n    features: [\n      \"Roll over volts\",\n      \"Royalty free commercial license\",\n      \"Public generations\",\n      \"Plugins for Figma, Framer, Webflow\",\n    ],\n    buttonText: \"Get Started\",\n  },\n  {\n    title: \"Standard\",\n    monthlyPrice: 16,\n    annuallyPrice: Math.round(16 * 12 * 0.8),\n    desc: \"For professional creators\",\n    features: [\n      \"Roll over volts\",\n      \"Royalty free commercial license\",\n      \"Public generations\",\n      \"Plugins for Figma, Framer, Webflow\",\n    ],\n    buttonText: \"Get Started\",\n  },\n  {\n    title: \"Pro\",\n    monthlyPrice: 32,\n    annuallyPrice: Math.round(32 * 12 * 0.8),\n    desc: \"Advanced tools for teams\",\n    features: [\n      \"Roll over volts\",\n      \"Royalty free commercial license\",\n      \"Private generations\",\n      \"Plugins for Figma, Framer, Webflow\",\n    ],\n    buttonText: \"Get Started\",\n  },\n  {\n    title: \"Mastermind\",\n    monthlyPrice: 64,\n    annuallyPrice: Math.round(64 * 12 * 0.8),\n    desc: \"All-in-one for enterprises\",\n    features: [\n      \"Roll over volts\",\n      \"Royalty free commercial license\",\n      \"Private generations\",\n      \"Plugins for Figma, Framer, Webflow\",\n    ],\n    buttonText: \"Get Started\",\n  },\n];\n\nconst PlanCard = ({\n  plan,\n  billing,\n  users,\n}: {\n  plan: Plan;\n  billing: \"monthly\" | \"annual\";\n  users: number;\n}) => {\n  const price = billing === \"annual\" ? plan.annuallyPrice : plan.monthlyPrice;\n\n  return (\n    <div\n      className={cn(\n        \"flex flex-col relative rounded-2xl border-2 ring-2 transition-all bg-background/50 border-gray-200 dark:border-gray-700 overflow-hidden\",\n        plan.title === \"Mastermind\" && \"border-blue-500 ring-blue-500/20\",\n        plan.title === \"Standard\" &&\n          \"border-orange-500 ring-orange-500/20 dark:border-orange-500 dark:ring-orange-500/20\",\n      )}\n    >\n      <div className=\"p-4 flex flex-col items-start w-full relative\">\n        <h2 className=\"font-normal text-sm text-foreground\">{plan.title}</h2>\n        <h3 className=\"mt-2 text-xl md:text-3xl font-bold\">\n          ${price * users}\n          <span className=\"text-sm font-normal text-muted-foreground\">\n            /{billing}\n          </span>\n        </h3>\n        <p className=\"text-xs md:text-base text-muted-foreground mt-1\">\n          {plan.desc}\n        </p>\n      </div>\n\n      <div className=\"flex flex-col items-start w-full px-4 py-2\">\n        <Button size=\"lg\" className=\"w-full\">\n          {plan.buttonText}\n        </Button>\n        <div className=\"h-8 overflow-hidden w-full mx-auto\">\n          <AnimatePresence mode=\"wait\">\n            <motion.span\n              key={billing}\n              initial={{ y: 20, opacity: 0 }}\n              animate={{ y: 0, opacity: 1 }}\n              exit={{ y: -20, opacity: 0 }}\n              transition={{ duration: 0.2, ease: \"easeOut\" }}\n              className=\"text-sm text-center text-muted-foreground mt-3 block\"\n            >\n              {billing === \"monthly\"\n                ? \"Billed monthly\"\n                : \"Billed in one annual payment\"}\n            </motion.span>\n          </AnimatePresence>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-start w-full px-4 py-2 gap-y-1\">\n        <span className=\"text-xs text-left mb-1\">Includes:</span>\n        {plan.features.map((feature, idx) => (\n          <div key={idx} className=\"flex items-start gap-2\">\n            <CheckIcon className=\"w-3 h-3 flex-shrink-0 text-blue-500 mt-1\" />\n            <span className=\"text-sm\">{feature}</span>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default function PricingWithUserScaling({\n  plans = DEFAULT_PLANS,\n  defaultBilling = \"monthly\",\n  defaultUsers = 1,\n}: PricingWithUserScalingProps) {\n  const [billing, setBilling] = useState<\"monthly\" | \"annual\">(defaultBilling);\n  const [users, setUsers] = useState(defaultUsers);\n\n  return (\n    <section className=\"py-16 bg-white dark:bg-neutral-950\">\n      <div className=\"max-w-6xl mx-auto px-6\">\n        {/* Controls */}\n        <div className=\"flex flex-col md:flex-row items-center justify-between gap-4 mb-10\">\n          <div className=\"flex bg-gray-100 dark:bg-neutral-800 rounded-full\">\n            <button\n              className={cn(\n                \"px-4 py-2 rounded-full text-sm font-medium transition\",\n                billing === \"annual\"\n                  ? \"bg-black text-white\"\n                  : \"dark:text-gray-200 text-gray-700\",\n              )}\n              onClick={() => setBilling(\"annual\")}\n            >\n              Annually (Save 20%)\n            </button>\n            <button\n              className={cn(\n                \"px-4 py-2 rounded-full text-sm font-medium transition\",\n                billing === \"monthly\" ? \"bg-black text-white\" : \"text-gray-700\",\n              )}\n              onClick={() => setBilling(\"monthly\")}\n            >\n              Monthly\n            </button>\n          </div>\n\n          <div className=\"flex items-center gap-3 border border-gray-200 dark:border-gray-700 rounded-full px-4 py-2 text-sm font-normal\">\n            <span>Users:</span>\n            <button\n              className=\"px-2 text-lg\"\n              onClick={() => setUsers(Math.max(1, users - 1))}\n            >\n              <Minus className=\"w-4 h-4\" />\n            </button>\n            <span className=\"w-6 text-center\">{users}</span>\n            <button\n              className=\"px-2 text-lg\"\n              onClick={() => setUsers(users + 1)}\n            >\n              <Plus className=\"w-4 h-4\" />\n            </button>\n          </div>\n        </div>\n\n        {/* Grid */}\n        <div className=\"grid gap-6 md:grid-cols-5\">\n          {plans.map((plan) => (\n            <PlanCard\n              key={plan.title}\n              plan={plan}\n              billing={billing}\n              users={users}\n            />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/pricing-with-user-scaling.tsx"
    }
  ]
}