{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-motion",
  "type": "registry:component",
  "title": "Pricing motion",
  "description": "Pricing plan cards that fade up in sequence on scroll, each with name, price, blurb, feature bullets and a choose button, plus an accent featured plan.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/premium/pricing-motion.tsx",
      "type": "registry:ui",
      "target": "components/ui/pricing-motion.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\n/** PricingMotion — pricing tiers that rise into view one after another as they scroll in. */\n\ntype Plan = { name: string; price: string; blurb: string; featured?: boolean; features: string[] }\n\n// Lumen pricing tiers.\nconst SAMPLE_PLANS: Plan[] = [\n  { name: \"Starter\", price: \"$0\", blurb: \"For a founder sending the first invoices\", features: [\"5 invoices a month\", \"1 seat\", \"Email support\"] },\n  { name: \"Pro\", price: \"$49\", blurb: \"For finance teams that close every month\", featured: true, features: [\"Unlimited invoices\", \"Up to 10 seats\", \"Bank sync and reconciliation\", \"Priority support\"] },\n  { name: \"Business\", price: \"$149\", blurb: \"For companies with audit requirements\", features: [\"Everything in Pro\", \"Unlimited seats\", \"SSO and audit log\", \"Dedicated manager\"] },\n]\n\ntype PricingMotionProps = {\n  plans?: Plan[]\n  className?: string\n}\n\nfunction PricingMotion({ plans = SAMPLE_PLANS, className }: PricingMotionProps) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"pricing-motion\" data-tier=\"premium\" className={cn(\"grid gap-4 md:grid-cols-3\", className)}>\n      {plans.map((p, i) => (\n        <motion.div\n          key={p.name}\n          initial={reduce ? false : { opacity: 0, y: 16 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true }}\n          transition={{ delay: i * 0.08 }}\n          className={cn(\n            \"flex flex-col rounded-xl border bg-surface p-6\",\n            p.featured ? \"border-accent shadow-lg\" : \"border-border\"\n          )}\n        >\n          <h3 className=\"text-sm font-medium text-fg\">{p.name}</h3>\n          <p className=\"mt-2 text-3xl font-medium tracking-[-0.022em] tabular-nums text-fg\">{p.price}</p>\n          <p className=\"mt-1 text-xs text-fg-muted\">{p.blurb}</p>\n          <ul className=\"mt-4 flex-1 space-y-2 text-sm text-fg-muted\">\n            {p.features.map((f) => (\n              <li key={f}>• {f}</li>\n            ))}\n          </ul>\n          <Button className=\"mt-6 w-full\" variant={p.featured ? \"default\" : \"outline\"}>\n            Choose {p.name}\n          </Button>\n        </motion.div>\n      ))}\n    </div>\n  )\n}\nexport { PricingMotion }\nexport type { PricingMotionProps, Plan as PricingMotionPlan }\n"
    }
  ]
}