{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "carousel-stack",
  "type": "registry:block",
  "title": "Carousel stack",
  "description": "Carousel stack",
  "files": [
    {
      "path": "components/usages/carouselstackusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport Image from \"next/image\";\r\n\r\nimport { StackCard } from \"@/registry/open-source/carousel-stack\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<StackCard\r\n\t\t\t\tcards={[\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey=\"one\"\r\n\t\t\t\t\t\tclassName=\"w-80 rounded-md p-5 bg-blue-100 border-2 border-blue-300 space-y-2 shadow-lg shadow-blue-200\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<p className=\"text-sm uppercase\">Feature #1</p>\r\n\t\t\t\t\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\t\t\t\t\tIntroduce a feature and its benefit.\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t<div className=\"aspect-video grid place-items-center bg-background rounded-md\">\r\n\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\twidth={100}\r\n\t\t\t\t\t\t\t\theight={100}\r\n\t\t\t\t\t\t\t\tsize={64}\r\n\t\t\t\t\t\t\t\tclassName=\"text-secondary\"\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<p className=\"text-sm\">\r\n\t\t\t\t\t\t\tExplain how the feature provide value and benefit your\r\n\t\t\t\t\t\t\tcustomers. Keep it short and sweet.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>,\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey=\"tow\"\r\n\t\t\t\t\t\tclassName=\"w-80 rounded-md p-5 bg-amber-100 border-2 border-amber-300 space-y-2 shadow-lg shadow-amber-200\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<p className=\"text-sm uppercase\">Feature #2</p>\r\n\t\t\t\t\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\t\t\t\t\tIntroduce a feature and its benefit.\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t<div className=\"aspect-video grid place-items-center bg-background rounded-md\">\r\n\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\twidth={100}\r\n\t\t\t\t\t\t\t\theight={100}\r\n\t\t\t\t\t\t\t\tsize={64}\r\n\t\t\t\t\t\t\t\tclassName=\"text-secondary\"\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<p className=\"text-sm\">\r\n\t\t\t\t\t\t\tExplain how the feature provide value and benefit your\r\n\t\t\t\t\t\t\tcustomers. Keep it short and sweet.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>,\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey=\"three\"\r\n\t\t\t\t\t\tclassName=\"w-80 rounded-md p-5 bg-green-100 border-2 border-green-300 space-y-2 shadow-lg shadow-green-200\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<p className=\"text-sm uppercase\">Feature #3</p>\r\n\t\t\t\t\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\t\t\t\t\tIntroduce a feature and its benefit.\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t<div className=\"aspect-video grid place-items-center bg-background rounded-md\">\r\n\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t\twidth={100}\r\n\t\t\t\t\t\t\t\theight={100}\r\n\t\t\t\t\t\t\t\tsize={64}\r\n\t\t\t\t\t\t\t\tclassName=\"text-secondary\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<p className=\"text-sm\">\r\n\t\t\t\t\t\t\tExplain how the feature provide value and benefit your\r\n\t\t\t\t\t\t\tcustomers. Keep it short and sweet.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>,\r\n\t\t\t\t]}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/carouselstackusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport Image from \"next/image\";\r\n\r\nimport { StackCard } from \"@/registry/open-source/carousel-stack\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<StackCard\r\n\t\t\t\tcards={[\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey=\"one\"\r\n\t\t\t\t\t\tclassName=\"w-80 rounded-md p-5 bg-blue-100 border-2 border-blue-300 space-y-2 shadow-lg shadow-blue-200\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<p className=\"text-sm uppercase\">Feature #1</p>\r\n\t\t\t\t\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\t\t\t\t\tIntroduce a feature and its benefit.\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t<div className=\"aspect-video grid place-items-center bg-background rounded-md\">\r\n\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\twidth={100}\r\n\t\t\t\t\t\t\t\theight={100}\r\n\t\t\t\t\t\t\t\tsize={64}\r\n\t\t\t\t\t\t\t\tclassName=\"text-secondary\"\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<p className=\"text-sm\">\r\n\t\t\t\t\t\t\tExplain how the feature provide value and benefit your\r\n\t\t\t\t\t\t\tcustomers. Keep it short and sweet.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>,\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey=\"tow\"\r\n\t\t\t\t\t\tclassName=\"w-80 rounded-md p-5 bg-amber-100 border-2 border-amber-300 space-y-2 shadow-lg shadow-amber-200\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<p className=\"text-sm uppercase\">Feature #2</p>\r\n\t\t\t\t\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\t\t\t\t\tIntroduce a feature and its benefit.\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t<div className=\"aspect-video grid place-items-center bg-background rounded-md\">\r\n\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\twidth={100}\r\n\t\t\t\t\t\t\t\theight={100}\r\n\t\t\t\t\t\t\t\tsize={64}\r\n\t\t\t\t\t\t\t\tclassName=\"text-secondary\"\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<p className=\"text-sm\">\r\n\t\t\t\t\t\t\tExplain how the feature provide value and benefit your\r\n\t\t\t\t\t\t\tcustomers. Keep it short and sweet.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>,\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey=\"three\"\r\n\t\t\t\t\t\tclassName=\"w-80 rounded-md p-5 bg-green-100 border-2 border-green-300 space-y-2 shadow-lg shadow-green-200\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<p className=\"text-sm uppercase\">Feature #3</p>\r\n\t\t\t\t\t\t<h3 className=\"text-lg text-balance font-semibold\">\r\n\t\t\t\t\t\t\tIntroduce a feature and its benefit.\r\n\t\t\t\t\t\t</h3>\r\n\t\t\t\t\t\t<div className=\"aspect-video grid place-items-center bg-background rounded-md\">\r\n\t\t\t\t\t\t\t<Image\r\n\t\t\t\t\t\t\t\tsrc=\"/itjustworks.jpg\"\r\n\t\t\t\t\t\t\t\twidth={100}\r\n\t\t\t\t\t\t\t\theight={100}\r\n\t\t\t\t\t\t\t\tsize={64}\r\n\t\t\t\t\t\t\t\tclassName=\"text-secondary\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<p className=\"text-sm\">\r\n\t\t\t\t\t\t\tExplain how the feature provide value and benefit your\r\n\t\t\t\t\t\t\tcustomers. Keep it short and sweet.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>,\r\n\t\t\t\t]}\r\n\t\t\t/>\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/carousel-stack.tsx",
      "content": "import type React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { ArrowLeft, ArrowRight } from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\n// Credit:\n// https://starui.link/docs/components/stack-card\n\nexport interface StackCard extends React.ComponentPropsWithRef<\"div\"> {\n\tcards: React.ReactNode[];\n}\n\nexport function StackCard({ cards, className, ...props }: StackCard) {\n\tconst [current, setCurrent] = useState(0);\n\n\treturn (\n\t\t<div className={cn(\"flex flex-col\", className)} {...props}>\n\t\t\t<div className=\"relative\">\n\t\t\t\t{cards.map((card, index) => (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tkey={index + \"carousel-stack\"}\n\t\t\t\t\t\tinitial={false}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\tindex > 0 && \"absolute bottom-0 left-0 w-full\",\n\t\t\t\t\t\t\tcurrent < index && \"pointer-events-none\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\topacity: index <= current ? 1 : 0,\n\t\t\t\t\t\t\ty: (index - current) * 28,\n\t\t\t\t\t\t\tscale: 1 + (index - current) * 0.08,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{card}\n\t\t\t\t\t</motion.div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t\t<div className=\"mt-5 flex items-center justify-center gap-5\">\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"bg-background text-foreground rounded-full p-2 disabled:bg-background disabled:cursor-not-allowed active:scale-90 transition-transform disabled:active:scale-100\"\n\t\t\t\t\tdisabled={current === 0}\n\t\t\t\t\tonClick={() => setCurrent((prev) => prev - 1)}\n\t\t\t\t>\n\t\t\t\t\t<ArrowLeft size={20} />\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"bg-background text-foreground rounded-full p-2 disabled:bg-background disabled:cursor-not-allowed active:scale-90 transition-transform disabled:active:scale-100\"\n\t\t\t\t\tdisabled={current === cards.length - 1}\n\t\t\t\t\tonClick={() => setCurrent((prev) => prev + 1)}\n\t\t\t\t>\n\t\t\t\t\t<ArrowRight size={20} />\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}