{
  "name": "compare-slider-vertical-demo",
  "type": "registry:example",
  "registryDependencies": [
    "compare-slider"
  ],
  "files": [
    {
      "path": "examples/compare-slider-vertical-demo.tsx",
      "type": "registry:example",
      "content": "import {\n  CompareSlider,\n  CompareSliderAfter,\n  CompareSliderBefore,\n  CompareSliderHandle,\n} from \"@/registry/bases/base/ui/compare-slider\";\n\nexport default function CompareSliderVerticalDemo() {\n  return (\n    <CompareSlider\n      defaultValue={50}\n      orientation=\"vertical\"\n      className=\"h-[400px] w-full overflow-hidden rounded-lg border\"\n    >\n      <CompareSliderBefore>\n        {/* biome-ignore lint/performance/noImgElement: Demo image for comparison slider */}\n        <img\n          src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80\"\n          alt=\"Before\"\n          className=\"size-full object-cover\"\n        />\n      </CompareSliderBefore>\n      <CompareSliderAfter>\n        {/* biome-ignore lint/performance/noImgElement: Demo image for comparison slider */}\n        <img\n          src=\"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80&sat=-100\"\n          alt=\"After\"\n          className=\"size-full object-cover grayscale\"\n        />\n      </CompareSliderAfter>\n      <CompareSliderHandle />\n    </CompareSlider>\n  );\n}\n",
      "target": ""
    }
  ]
}