{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing",
  "title": "Pricing",
  "description": "A three-tier pricing grid with a highlighted popular plan, feature checklists, and per-plan calls to action.",
  "registryDependencies": [
    "card",
    "button",
    "badge",
    "https://www.quilldesignsystem.com/r/icon.json"
  ],
  "files": [
    {
      "path": "registry/blocks/pricing.tsx",
      "content": "import {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n} from '@/components/ui/card'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Icon } from '@/components/ui/icon'\n\nconst plans = [\n  { name: 'Starter', price: '$0', blurb: 'For trying things out.', features: ['1 project', 'Community support', '1 GB storage'], cta: 'Get started', featured: false },\n  { name: 'Pro', price: '$18', blurb: 'For growing teams.', features: ['Unlimited projects', 'Priority support', '100 GB storage', 'Analytics'], cta: 'Start free trial', featured: true },\n  { name: 'Enterprise', price: 'Custom', blurb: 'For large organizations.', features: ['SSO & SAML', 'Dedicated support', 'Unlimited storage', 'Audit logs'], cta: 'Contact sales', featured: false },\n]\n\n/** A three-tier pricing grid with a highlighted popular plan, feature checklists, and per-plan calls to action. */\nexport function Pricing() {\n  return (\n    <div className=\"grid grid-cols-1 gap-6 md:grid-cols-3\">\n      {plans.map((p) => (\n        <Card key={p.name} className={p.featured ? 'ring-2 ring-ring' : undefined}>\n          <CardHeader>\n            <div className=\"flex items-center justify-between\">\n              <CardTitle>{p.name}</CardTitle>\n              {p.featured && <Badge>Popular</Badge>}\n            </div>\n            <CardDescription>{p.blurb}</CardDescription>\n            <div className=\"pt-2\">\n              <span className=\"text-3xl font-medium text-foreground\">{p.price}</span>\n              {p.price !== 'Custom' && <span className=\"text-sm text-muted-foreground\">/mo</span>}\n            </div>\n          </CardHeader>\n          <CardContent className=\"flex flex-col gap-2\">\n            {p.features.map((f) => (\n              <div key={f} className=\"flex items-center gap-2 text-sm text-foreground\">\n                <Icon name=\"check\" size={16} className=\"text-primary\" />\n                {f}\n              </div>\n            ))}\n          </CardContent>\n          <CardFooter>\n            <Button variant={p.featured ? 'default' : 'outline'} className=\"w-full\">\n              {p.cta}\n            </Button>\n          </CardFooter>\n        </Card>\n      ))}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/quill/pricing.tsx"
    }
  ],
  "meta": {
    "intent": [
      "marketing",
      "commerce"
    ],
    "use_when": "You need a tiered pricing grid with a highlighted plan and feature checklists."
  },
  "docs": "A three-tier pricing grid with a highlighted popular plan, feature checklists, and per-plan calls to action. Do: Mark exactly one plan as featured (ring + Popular badge) to guide the decision. Don't: Feature more than one plan, or none — either dilutes the recommendation this pattern exists to make. Use feature-section when you're describing capabilities in general, not comparing specific paid tiers against each other. Use order-summary when the user has already chosen a plan and is now reviewing a specific purchase, not comparing options.",
  "categories": [
    "marketing",
    "commerce"
  ],
  "type": "registry:block"
}