{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-x-carousel-demo",
  "title": "scroll x carousel Demo",
  "description": "Demo showing how to use scroll x carousel component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/scroll-x-carousel"
  ],
  "files": [
    {
      "path": "registry/demo/scroll-animations/scroll-x-carousel/index.tsx",
      "content": "import {\n  ScrollXCarousel,\n  ScrollXCarouselContainer,\n  ScrollXCarouselProgress,\n  ScrollXCarouselWrap,\n} from '@/components/systaliko-ui/scroll-animations/scroll-x-carousel';\n\nconst SLIDES = [\n  'https://images.unsplash.com/photo-1577899612423-d95f56178e0d?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1561370502-101289f5b910?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1736108872146-9b47e6ffc89e?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1596454073593-95cc85a8ce6c?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1696138290340-e7d52ddf26ba?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n  'https://images.unsplash.com/photo-1578272642230-04e5f9841a33?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',\n];\n\nexport function ScrollXCarouselDemo() {\n  return (\n    <ScrollXCarousel className=\"h-[150vh]\">\n      <ScrollXCarouselContainer className=\"min-h-dvh place-content-center space-y-6\">\n        <div className=\" pointer-events-none w-[5vw] h-[103%] absolute inset-[0_auto_0_0] z-10 bg-[linear-gradient(90deg,_var(--background)_15%,_transparent)]\" />\n        <div className=\"pointer-events-none bg-[linear-gradient(270deg,_var(--background)_15%,_transparent)] w-[5vw] h-[103%] absolute inset-[0_0_0_auto] z-10\" />\n\n        <ScrollXCarouselWrap\n          className=\"flex space-x-8 [&>*:first-child]:ml-8\"\n          strain\n        >\n          {SLIDES.map((slide, index) => (\n            <div key={index} className=\"min-w-[260px] max-h-[70vh]\">\n              <img\n                alt=\"showcase\"\n                src={slide}\n                className=\"size-full inline-block align-middle object-cover\"\n              />\n            </div>\n          ))}\n        </ScrollXCarouselWrap>\n        <ScrollXCarouselProgress\n          className=\"bg-secondary mx-8 h-1 rounded-full overflow-hidden\"\n          progressStyle=\"size-full bg-secondary-foreground rounded-full\"\n        />\n      </ScrollXCarouselContainer>\n    </ScrollXCarousel>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/scroll-x-carousel-demo.tsx"
    }
  ],
  "type": "registry:block"
}