shadcn/app/public/registry/styles/default/comparison.json

{
  "name": "comparison",
  "description": "Before/after comparison slider",
  "dependencies": [
    "react-compare-slider"
  ],
  "files": [
    {
      "name": "comparison.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface ComparisonItem {\n  label: string\n  value: boolean | string\n}\n\nexport interface ComparisonColumn {\n  title: string\n  items: ComparisonItem[]\n  highlighted?: boolean\n}\n\nexport interface ComparisonProps extends React.HTMLAttributes<HTMLDivElement> {\n  columns: ComparisonColumn[]\n}\n\nconst Comparison = React.forwardRef<HTMLDivElement, ComparisonProps>(\n  ({ className, columns, ...props }, ref) => {\n    const maxItems = Math.max(...columns.map((col) => col.items.length))\n\n    return (\n      <div ref={ref} className={cn(\"overflow-x-auto\", className)} {...props}>\n        <div\n          className=\"grid gap-4\"\n          style={{ gridTemplateColumns: `repeat(${columns.length}, 1fr)` }}\n        >\n          {columns.map((column, colIndex) => (\n            <div\n              key={colIndex}\n              className={cn(\n                \"rounded-lg border p-6\",\n                column.highlighted && \"border-primary shadow-lg\"\n              )}\n            >\n              <h3 className=\"mb-6 text-lg font-semibold\">{column.title}</h3>\n              <div className=\"space-y-4\">\n                {column.items.map((item, itemIndex) => (\n                  <div key={itemIndex} className=\"flex items-center gap-3\">\n                    {typeof item.value === \"boolean\" ? (\n                      item.value ? (\n                        <Check className=\"h-5 w-5 text-green-500\" />\n                      ) : (\n                        <X className=\"h-5 w-5 text-red-500\" />\n                      )\n                    ) : (\n                      <span className=\"font-medium\">{item.value}</span>\n                    )}\n                    <span className=\"text-sm\">{item.label}</span>\n                  </div>\n                ))}\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    )\n  }\n)\nComparison.displayName = \"Comparison\"\n\nexport { Comparison }\n"
    }
  ],
  "type": "components:ui"
}