{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-comparison-slider",
  "title": "Feature Comparison Slider",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-comparison-slider/FeatureComparisonSlider.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { AlertTriangle, ArrowLeftRight, CheckCircle2, Layers, PackageX } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface FeatureComparisonSliderProps {\n  className?: string\n}\n\nexport function FeatureComparisonSlider({ className }: FeatureComparisonSliderProps) {\n  const [sliderPosition, setSliderPosition] = React.useState(50)\n\n  const setPreset = (pos: number) => {\n    setSliderPosition(pos)\n  }\n\n  return (\n    <section\n      data-slot=\"feature-comparison-slider\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      <div className=\"mx-auto max-w-6xl space-y-12\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <ArrowLeftRight className=\"text-primary size-3.5\" />\n            Side-by-Side architectural upgrade\n          </Badge>\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n            Monolithic npm packages vs Unbundled code ownership.\n          </h2>\n          <p className=\"text-muted-foreground text-base\">\n            Drag the slider to compare how UIPKGE eliminates dependency chains, bundle bloat, and breaking semver\n            updates.\n          </p>\n\n          {/* Slider Quick Presets */}\n          <div className=\"flex items-center justify-center gap-2 pt-2\">\n            <Button\n              size=\"sm\"\n              variant=\"outline\"\n              className={cn('font-mono text-xs', sliderPosition === 0 && 'border-primary bg-primary/10 text-primary')}\n              onClick={() => setPreset(0)}\n            >\n              100% Monolith\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"outline\"\n              className={cn('font-mono text-xs', sliderPosition === 50 && 'border-primary bg-primary/10 text-primary')}\n              onClick={() => setPreset(50)}\n            >\n              50 / 50 Comparison\n            </Button>\n            <Button\n              size=\"sm\"\n              variant=\"outline\"\n              className={cn('font-mono text-xs', sliderPosition === 100 && 'border-primary bg-primary/10 text-primary')}\n              onClick={() => setPreset(100)}\n            >\n              100% UIPKGE Registry\n            </Button>\n          </div>\n        </div>\n\n        {/* Interactive Comparison Container */}\n        <Card className=\"border-border bg-card relative overflow-hidden rounded-2xl shadow-sm select-none\">\n          {/* Dual Split View Canvas */}\n          <div className=\"grid min-h-[460px] grid-cols-1 md:grid-cols-2\">\n            {/* Left Side: Monolithic Approach */}\n            <div className=\"bg-destructive/5 border-border flex flex-col justify-between space-y-6 border-b p-6 text-left sm:p-8 md:border-r md:border-b-0\">\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center justify-between\">\n                  <Badge\n                    variant=\"outline\"\n                    className=\"text-destructive bg-destructive/10 border-destructive/20 gap-1.5 font-mono text-xs\"\n                  >\n                    <PackageX className=\"size-3.5\" /> Traditional NPM Package\n                  </Badge>\n                  <span className=\"text-muted-foreground font-mono text-xs\">Locked in node_modules</span>\n                </div>\n\n                <h3 className=\"text-foreground font-mono text-xl font-bold\">Black-Box Dependency Hell</h3>\n                <p className=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                  Monolithic component libraries ship compiled bundles with opaque internals, forcing you to fight CSS\n                  specificity and wait months for upstream bug fixes.\n                </p>\n\n                {/* Pain Points List */}\n                <ul className=\"space-y-2.5 pt-2\">\n                  <li className=\"text-muted-foreground flex items-start gap-2 text-xs\">\n                    <AlertTriangle className=\"text-destructive mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong>640 kB vendor chunk:</strong> Ships all 80+ unused components to production.\n                    </span>\n                  </li>\n                  <li className=\"text-muted-foreground flex items-start gap-2 text-xs\">\n                    <AlertTriangle className=\"text-destructive mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong>Breaking semver upgrades:</strong> Upgrading minor versions breaks custom CSS overrides.\n                    </span>\n                  </li>\n                  <li className=\"text-muted-foreground flex items-start gap-2 text-xs\">\n                    <AlertTriangle className=\"text-destructive mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong>CVE vulnerability surface:</strong> Deep transitive dependency chains trigger security\n                      flags.\n                    </span>\n                  </li>\n                </ul>\n              </div>\n\n              <div className=\"border-destructive/20 bg-destructive/10 text-destructive flex items-center justify-between rounded-lg border p-3.5 font-mono text-xs\">\n                <span>Maintenance Overhead</span>\n                <span className=\"font-bold\">High (24 hrs/mo)</span>\n              </div>\n            </div>\n\n            {/* Right Side: UIPKGE Unbundled Architecture */}\n            <div className=\"bg-success/5 flex flex-col justify-between space-y-6 p-6 text-left sm:p-8\">\n              <div className=\"space-y-4\">\n                <div className=\"flex items-center justify-between\">\n                  <Badge\n                    variant=\"outline\"\n                    className=\"border-success/20 bg-success/10 text-success gap-1.5 font-mono text-xs\"\n                  >\n                    <Layers className=\"size-3.5\" /> UIPKGE Component Registry\n                  </Badge>\n                  <span className=\"text-success font-mono text-xs font-semibold\">100% Owned Source</span>\n                </div>\n\n                <h3 className=\"text-foreground font-mono text-xl font-bold\">Direct Code Ownership</h3>\n                <p className=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n                  Source files copied directly into your repository. You have absolute control over every token, prop,\n                  micro-interaction, and layout shape.\n                </p>\n\n                {/* Superpowers List */}\n                <ul className=\"space-y-2.5 pt-2\">\n                  <li className=\"text-foreground/90 flex items-start gap-2 text-xs\">\n                    <CheckCircle2 className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong>Zero bundle bloat:</strong> Only the exact component files you install exist in your app.\n                    </span>\n                  </li>\n                  <li className=\"text-foreground/90 flex items-start gap-2 text-xs\">\n                    <CheckCircle2 className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong>Zero breaking updates:</strong> No package updates ever modify your codebase without your\n                      consent.\n                    </span>\n                  </li>\n                  <li className=\"text-foreground/90 flex items-start gap-2 text-xs\">\n                    <CheckCircle2 className=\"text-success mt-0.5 size-4 shrink-0\" />\n                    <span>\n                      <strong>Zero CVE risk:</strong> No third-party runtime dependencies or obscure node_modules\n                      wrappers.\n                    </span>\n                  </li>\n                </ul>\n              </div>\n\n              <div className=\"border-success/20 bg-success/10 text-success flex items-center justify-between rounded-lg border p-3.5 font-mono text-xs\">\n                <span>Maintenance Overhead</span>\n                <span className=\"font-bold\">Zero (Permanent Stability)</span>\n              </div>\n            </div>\n          </div>\n\n          {/* Slider Range Bar at Bottom */}\n          <div className=\"bg-muted/40 border-border flex items-center gap-4 border-t p-4\">\n            <span className=\"text-destructive shrink-0 font-mono text-xs\">Monolith</span>\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              value={sliderPosition}\n              onChange={(e) => setSliderPosition(Number(e.target.value))}\n              className=\"accent-primary bg-border h-2 w-full cursor-pointer rounded-lg\"\n            />\n            <span className=\"text-success shrink-0 font-mono text-xs font-semibold\">UIPKGE</span>\n          </div>\n        </Card>\n      </div>\n    </section>\n  )\n}\nexport default FeatureComparisonSlider\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureComparisonSlider.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Interactive architecture comparison slider workbench contrasting Monolithic npm packages against UIPKGE unbundled code ownership.",
  "categories": [
    "marketing"
  ]
}