{
  "name": "compare-slider-customization-demo",
  "type": "registry:example",
  "registryDependencies": [
    "compare-slider"
  ],
  "files": [
    {
      "path": "examples/compare-slider-customization-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport {\n  CompareSlider,\n  CompareSliderAfter,\n  CompareSliderBefore,\n  CompareSliderHandle,\n} from \"@/registry/bases/base/ui/compare-slider\";\n\nexport default function CompareSliderCustomDemo() {\n  return (\n    <CompareSlider\n      defaultValue={50}\n      className=\"h-[300px] overflow-hidden rounded-lg border\"\n    >\n      <CompareSliderBefore className=\"flex size-full items-center justify-center bg-muted text-center\">\n        <div className=\"font-bold text-2xl\">Kickflip</div>\n      </CompareSliderBefore>\n      <CompareSliderAfter className=\"flex size-full items-center justify-center bg-primary text-center text-primary-foreground\">\n        <div className=\"font-bold text-2xl\">Heelflip</div>\n      </CompareSliderAfter>\n      <CompareSliderHandle>\n        <div className=\"flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg\">\n          <span className=\"font-bold text-xs\">VS</span>\n        </div>\n      </CompareSliderHandle>\n    </CompareSlider>\n  );\n}\n",
      "target": ""
    }
  ]
}