{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-01",
  "title": "Comparison 01",
  "description": "Product comparison table with images, specification rows, and checkmark/cross value indicators. Use it on product or pricing pages to help users make confident purchase decisions by clearly highlighting key differences.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/registry/blocks/comparison-01/comparison.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { Check, X } from \"lucide-react\";\n\ntype FeatureValue =\n  | string\n  | boolean\n  | { type: \"colors\"; values: string[] }\n  | { type: \"percentage\"; value: number };\n\ninterface Product {\n  name: string;\n  img?: string;\n  icon?: React.ReactNode;\n  featured?: boolean;\n}\ninterface Feature {\n  name: string;\n  values: FeatureValue[];\n}\ninterface Comparison01Props {\n  label?: string;\n  title?: string;\n  description?: string;\n  products?: Product[];\n  features?: Feature[];\n  className?: string;\n}\n\nconst FeatureValueCell = ({ value }: { value: FeatureValue }) => {\n  if (typeof value === \"boolean\")\n    return value ? (\n      <Check className=\"size-5 text-foreground\" />\n    ) : (\n      <X className=\"size-5 text-muted-foreground/40\" />\n    );\n  if (typeof value === \"object\" && value.type === \"colors\")\n    return (\n      <div className=\"flex items-center gap-1.5\">\n        {value.values.map((color, i) => (\n          <div\n            key={i}\n            className=\"size-5 rounded-full border border-border\"\n            style={{ backgroundColor: color }}\n          />\n        ))}\n      </div>\n    );\n  if (typeof value === \"object\" && value.type === \"percentage\")\n    return <span className=\"text-sm\">{value.value}%</span>;\n  return <span className=\"text-sm\">{value}</span>;\n};\n\nconst Comparison01 = ({\n  label = \"Why choose us\",\n  title = \"Not all creams are created equal\",\n  description = \"See how our formula compares to the competition.\",\n  products = [\n    {\n      name: \"Basic Cream\",\n      img: \"https://www.shadcnship.com/images/placeholders/product-design-1.webp\",\n    },\n    {\n      name: \"Lumière Pro\",\n      featured: true,\n      img: \"https://www.shadcnship.com/images/placeholders/product-design-2.webp\",\n    },\n    {\n      name: \"Other Brands\",\n      img: \"https://www.shadcnship.com/images/placeholders/product-design-3.webp\",\n    },\n  ],\n  features = [\n    { name: \"Hydration duration\", values: [\"4 hours\", \"72 hours\", \"8 hours\"] },\n    { name: \"Dermatologist tested\", values: [false, true, false] },\n    { name: \"Fragrance-free\", values: [false, true, false] },\n    { name: \"For sensitive skin\", values: [false, true, \"Partial\"] },\n    { name: \"SPF protection\", values: [false, true, false] },\n    { name: \"Natural ingredients\", values: [\"Partial\", true, false] },\n    { name: \"Vegan & cruelty-free\", values: [false, true, false] },\n    { name: \"Price\", values: [\"$12\", \"$48\", \"$65\"] },\n  ],\n  className,\n}: Comparison01Props) => {\n  const gridStyle = {\n    gridTemplateColumns: `180px repeat(${products.length}, 1fr)`,\n  };\n\n  return (\n    <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n      <div className=\"mx-auto flex max-w-5xl flex-col items-center gap-4 text-center\">\n        {label && (\n          <p className=\"text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n            {label}\n          </p>\n        )}\n        <h2 className=\"text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl\">\n          {title}\n        </h2>\n        {description && (\n          <p className=\"text-muted-foreground md:text-lg\">{description}</p>\n        )}\n      </div>\n      <div className=\"mx-auto mt-12 max-w-5xl overflow-x-auto\">\n        <div className=\"flex min-w-[640px] flex-col gap-1\">\n          <div className=\"grid\" style={gridStyle}>\n            <div className=\"p-4\" />\n            {products.map((product, idx) => (\n              <div key={idx} className=\"p-2\">\n                <div\n                  className={cn(\n                    \"overflow-hidden rounded-md\",\n                    product.featured\n                      ? \"bg-foreground text-background\"\n                      : \"bg-muted\",\n                  )}\n                >\n                  <div className=\"aspect-square w-full overflow-hidden\">\n                    {product.img ? (\n                      <img\n                        src={product.img}\n                        alt={product.name}\n                        className=\"size-full object-cover\"\n                      />\n                    ) : (\n                      <div className=\"flex size-full items-center justify-center bg-muted-foreground/10\">\n                        {product.icon ?? (\n                          <span className=\"text-4xl font-light text-muted-foreground/30\">\n                            {idx + 1}\n                          </span>\n                        )}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n          {features.map((feature, featureIdx) => (\n            <div\n              key={featureIdx}\n              className=\"grid items-center\"\n              style={gridStyle}\n            >\n              <div className=\"p-4 pr-6\">\n                <span className=\"line-clamp-2 text-sm font-medium text-muted-foreground\">\n                  {feature.name}\n                </span>\n              </div>\n              {feature.values.map((value, valueIdx) => (\n                <div\n                  key={valueIdx}\n                  className={cn(\n                    \"mx-2 flex h-full items-center justify-center rounded-md p-4\",\n                    products[valueIdx]?.featured &&\n                      \"bg-foreground/5 px-4 first:rounded-t-xl last:rounded-b-xl\",\n                  )}\n                >\n                  <FeatureValueCell value={value} />\n                </div>\n              ))}\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Comparison01;\n",
      "type": "registry:component",
      "target": "components/comparison-01.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/comparison-01.webp",
    "imageDark": "/r/previews/comparison-01-dark.webp",
    "prose": {
      "about": "Comparison 01 is a product comparison table that displays two or more items side by side with product images, specification rows, and checkmark or cross indicators for each attribute. Built with shadcn/ui Table and Badge components, it uses a sticky first column on desktop to keep attribute labels visible while scrolling horizontally through product columns. The table data (products, attributes, values) is passed as structured data objects.",
      "whenToUse": [
        "Product or pricing pages where users need to compare specific options before purchasing",
        "SaaS tools that want to compare themselves to competitors in a structured, credible way",
        "E-commerce or marketplace pages where side-by-side specification comparison reduces decision friction",
        "Documentation or feature matrix pages where a visual comparison table is more scannable than prose"
      ],
      "notes": "Keep the attribute list to 8–12 rows for readability. More than 12 attributes make the table scroll-heavy on mobile. Group attributes by category and separate groups with a subtle row divider.",
      "faqs": [
        {
          "question": "How many attributes can the table handle?",
          "answer": "Keep it to 8–12 rows for readability — more than that gets scroll-heavy on mobile."
        },
        {
          "question": "Does the first column stay visible while scrolling?",
          "answer": "Yes, on desktop the first column (attribute labels) is sticky while product columns scroll horizontally."
        },
        {
          "question": "Can I use it to compare against competitors?",
          "answer": "Yes, that's a common use — pass competitor names and values as regular columns alongside your own product."
        }
      ]
    }
  },
  "categories": [
    "pricing"
  ],
  "type": "registry:block"
}