{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "comparison-table",
  "title": "Comparison Table",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/comparison-table/ComparisonTable.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Check, Minus } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\ntype Cycle = 'monthly' | 'yearly'\ntype Cell = boolean | string | number\n\ninterface Plan {\n  name: string\n  monthly: number\n  yearly: number\n  cta: string\n  popular?: boolean\n}\n\ninterface Feature {\n  label: string\n  cells: [Cell, Cell, Cell]\n}\n\ninterface Group {\n  label: string\n  features: Feature[]\n}\n\nconst cycle = ref<Cycle>('monthly')\n\nconst plans: Plan[] = [\n  { name: 'Starter', monthly: 9, yearly: 7, cta: 'Start free' },\n  { name: 'Pro', monthly: 29, yearly: 24, cta: 'Start 14-day trial', popular: true },\n  { name: 'Enterprise', monthly: 79, yearly: 65, cta: 'Talk to sales' },\n]\n\nconst groups: Group[] = [\n  {\n    label: 'Core',\n    features: [\n      { label: 'Projects', cells: [3, 'Unlimited', 'Unlimited'] },\n      { label: 'Team seats', cells: ['5 seats', '20 seats', 'Custom'] },\n      { label: 'API access', cells: [false, true, true] },\n    ],\n  },\n  {\n    label: 'Collaboration',\n    features: [\n      { label: 'Shared workspaces', cells: [false, true, true] },\n      { label: 'Guest reviewers', cells: [false, '5 guests', 'Unlimited'] },\n      { label: 'Roles & permissions', cells: [true, true, true] },\n      { label: 'Audit log', cells: [false, false, true] },\n    ],\n  },\n  {\n    label: 'Support',\n    features: [\n      { label: 'Support channel', cells: ['Email', 'Priority email', 'Dedicated CSM'] },\n      { label: 'Guided onboarding', cells: [false, true, true] },\n      { label: 'Uptime SLA', cells: [false, false, '99.9%'] },\n    ],\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"comparison-table\" class=\"bg-background w-full\">\n    <div class=\"mx-auto max-w-5xl px-6 py-16\">\n      <div class=\"mb-8 flex flex-col items-center gap-4 text-center\">\n        <h2 class=\"text-2xl font-semibold tracking-tight sm:text-3xl\">Compare plans</h2>\n        <ToggleGroup type=\"single\" :model-value=\"cycle\" @update:model-value=\"(v) => v && (cycle = v as Cycle)\">\n          <ToggleGroupItem value=\"monthly\">Monthly</ToggleGroupItem>\n          <ToggleGroupItem value=\"yearly\">\n            Yearly\n            <Badge variant=\"secondary\" class=\"ml-2\">−20%</Badge>\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n\n      <div class=\"overflow-x-auto rounded-lg border\">\n        <table class=\"w-full max-w-[640px] min-w-full border-separate border-spacing-0 text-sm\">\n          <caption class=\"sr-only\">\n            Feature comparison across Starter, Pro, and Enterprise plans\n          </caption>\n\n          <thead>\n            <tr>\n              <th\n                scope=\"col\"\n                class=\"bg-background/95 supports-[backdrop-filter]:bg-background/80 text-muted-foreground sticky top-0 left-0 z-10 w-1/4 border-b p-4 text-left font-medium backdrop-blur\"\n              >\n                <span class=\"sr-only\">Feature</span>\n              </th>\n              <th\n                v-for=\"plan in plans\"\n                :key=\"plan.name\"\n                scope=\"col\"\n                class=\"sticky top-0 z-10 border-b p-4 text-center align-bottom\"\n                :class=\"\n                  plan.popular\n                    ? 'bg-primary/10 supports-[backdrop-filter]:bg-primary/10 backdrop-blur'\n                    : 'bg-background/95 supports-[backdrop-filter]:bg-background/80 backdrop-blur'\n                \"\n              >\n                <div class=\"flex flex-col items-center gap-1.5\">\n                  <Badge v-if=\"plan.popular\">Popular</Badge>\n                  <span class=\"text-base font-semibold tracking-tight\">{{ plan.name }}</span>\n                  <span class=\"tabular-nums\">\n                    <span class=\"text-2xl font-semibold\">${{ cycle === 'monthly' ? plan.monthly : plan.yearly }}</span>\n                    <span class=\"text-muted-foreground text-xs\"> /mo</span>\n                  </span>\n                  <Button size=\"sm\" :variant=\"plan.popular ? 'default' : 'outline'\" class=\"mt-1 w-full\">\n                    {{ plan.cta }}\n                  </Button>\n                </div>\n              </th>\n            </tr>\n          </thead>\n\n          <tbody v-for=\"group in groups\" :key=\"group.label\">\n            <tr>\n              <th\n                colspan=\"4\"\n                scope=\"colgroup\"\n                class=\"bg-muted/50 text-muted-foreground border-b p-3 text-left text-xs font-semibold tracking-widest uppercase\"\n              >\n                {{ group.label }}\n              </th>\n            </tr>\n            <tr v-for=\"feature in group.features\" :key=\"feature.label\" class=\"hover:bg-muted/30\">\n              <th scope=\"row\" class=\"border-b p-4 text-left align-middle font-normal\">\n                {{ feature.label }}\n              </th>\n              <td\n                v-for=\"(cell, i) in feature.cells\"\n                :key=\"i\"\n                class=\"border-b p-4 text-center align-middle\"\n                :class=\"{ 'bg-primary/5': plans[i].popular }\"\n              >\n                <Check v-if=\"cell === true\" class=\"text-foreground mx-auto size-4\" aria-label=\"Included\" />\n                <Minus\n                  v-else-if=\"cell === false\"\n                  class=\"text-muted-foreground/50 mx-auto size-4\"\n                  aria-label=\"Not included\"\n                />\n                <span v-else class=\"text-xs font-medium\">{{ cell }}</span>\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ComparisonTable.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/toggle-group.json"
  ],
  "description": "Plan comparison feature matrix (Starter / Pro / Enterprise) with a sticky header row, monthly/yearly ToggleGroup that flips prices live, grouped feature rows (Core / Collaboration / Support), and check / minus / short-value cells. The Pro column is highlighted with a \"Popular\" badge and a bg-primary/5 tint down the whole column.",
  "categories": [
    "marketing",
    "pricing"
  ]
}