{"$schema":"https://velocity-ui.com/schema/registry-item.json","name":"billing-matrix","title":"Billing Matrix","description":"A responsive pricing and entitlement surface for SaaS billing and plan comparison.","type":"registry:component","version":"0.9.0","status":"beta","registryDependencies":[],"dependencies":{"lucide-react":"^0.563.0"},"devDependencies":{},"files":[{"path":"src/components/velocity/billing-matrix.tsx","type":"component","target":"src/components/velocity/billing-matrix.tsx","content":"import { Check } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\n\nconst plans = [\n  { name: \"Starter\", price: \"$0\", features: [\"Public registry\", \"CLI installs\", \"Docs templates\"] },\n  { name: \"Pro\", price: \"$29\", features: [\"Team analytics\", \"Private collections\", \"Billing workflows\"] },\n  { name: \"Enterprise\", price: \"Custom\", features: [\"SSO\", \"Approval queues\", \"Dedicated registry\"] },\n];\n\nexport function BillingMatrix() {\n  return (\n    <div className=\"grid gap-4 md:grid-cols-3\">\n      {plans.map((plan) => (\n        <div key={plan.name} className=\"rounded-xl border bg-card p-5 shadow-sm\">\n          <div className=\"text-sm text-muted-foreground\">{plan.name}</div>\n          <div className=\"mt-2 text-3xl font-semibold\">{plan.price}</div>\n          <div className=\"mt-5 space-y-3 text-sm\">\n            {plan.features.map((feature) => (\n              <div key={feature} className=\"flex items-center gap-2 text-muted-foreground\">\n                <Check className=\"size-4 text-emerald-500\" />\n                {feature}\n              </div>\n            ))}\n          </div>\n          <Button className=\"mt-5 w-full\" variant={plan.name === \"Pro\" ? \"default\" : \"outline\"}>\n            Choose {plan.name}\n          </Button>\n        </div>\n      ))}\n    </div>\n  );\n}\n"}],"cssVars":{},"meta":{"category":"commerce","tags":["billing","pricing","subscriptions"],"docs":"/docs/getting-started","preview":"/pricing"}}