{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cutout-card-demo",
  "type": "registry:component",
  "registryDependencies": [
    "cutout-card"
  ],
  "files": [
    {
      "path": "registry/default/example/cutout-card-demo.tsx",
      "content": "\"use client\"\n\nimport { motion } from \"motion/react\"\n\nimport {\n  CutoutCard,\n  CutoutCardAction,\n  CutoutCardContent,\n  CutoutCardFooter,\n  CutoutCardImage,\n  CutoutCardInsetLabel,\n  CutoutCardMedia,\n  CutoutCardOverlay,\n  CutoutCardPin,\n  cutoutCardSurfaceClassName,\n  CutoutCorner,\n  useCutoutContentStaggerVariants,\n} from \"@/registry/default/ui/cutout-card\"\n\n// ============================================================================\n// Demo — full-page showcase matching the original single-component layout\n// ============================================================================\n\nfunction CutoutCardDemo() {\n  const stagger = useCutoutContentStaggerVariants()\n\n  return (\n    <div className=\"flex w-full items-center justify-center\">\n      <div className=\"relative w-full max-w-md\">\n        <CutoutCard className={cutoutCardSurfaceClassName}>\n          <CutoutCardMedia className=\"h-72\">\n            <CutoutCardImage\n              alt=\"Mountain landscape\"\n              sizes=\"(max-width: 768px) 100vw, 448px\"\n              src=\"/placeholders/apple-wallpaper.jpg\"\n            />\n            <CutoutCardOverlay />\n            <CutoutCardInsetLabel className=\"bg-card bottom-0 left-0 rounded-tr-[20px] px-5 py-3\">\n              <span className=\"text-muted-foreground text-[11px] font-semibold tracking-widest uppercase\">\n                Featured\n              </span>\n              <CutoutCorner className=\"text-card absolute -right-[31px] -bottom-px rotate-90\" />\n              <CutoutCorner className=\"text-card absolute -top-[31px] -left-px rotate-90\" />\n            </CutoutCardInsetLabel>\n            <CutoutCardPin className=\"bg-primary text-primary-foreground shadow-foreground/10 ring-border/30 top-0 right-0 rounded-bl-[16px] px-4 py-2 text-sm font-semibold shadow-md ring-1\">\n              New\n              <CutoutCorner\n                className=\"text-primary absolute top-0 -left-[23px] -rotate-90\"\n                size={24}\n              />\n              <CutoutCorner\n                className=\"text-primary absolute right-0 -bottom-[23px] -rotate-90\"\n                size={24}\n              />\n            </CutoutCardPin>\n          </CutoutCardMedia>\n          <CutoutCardContent>\n            <motion.div\n              animate=\"show\"\n              className=\"contents\"\n              initial=\"hidden\"\n              variants={stagger.container}\n            >\n              <motion.h2\n                className=\"text-card-foreground mb-2 text-xl leading-snug font-semibold text-balance\"\n                variants={stagger.item}\n              >\n                Alpine Adventures\n              </motion.h2>\n              <motion.p\n                className=\"text-muted-foreground mb-4 text-sm leading-relaxed text-pretty\"\n                variants={stagger.item}\n              >\n                Discover breathtaking mountain landscapes and experience the\n                serenity of nature at its finest.\n              </motion.p>\n              <motion.div variants={stagger.item}>\n                <CutoutCardFooter className=\"border-border/80 border-t pt-4\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"from-chart-4 to-chart-5 ring-card h-8 w-8 rounded-full bg-linear-to-br shadow-sm ring-2\" />\n                    <span className=\"text-card-foreground text-sm font-medium\">\n                      Sarah Chen\n                    </span>\n                  </div>\n                  <span className=\"text-muted-foreground text-xs tabular-nums\">\n                    5 min read\n                  </span>\n                </CutoutCardFooter>\n              </motion.div>\n            </motion.div>\n          </CutoutCardContent>\n          <CutoutCardAction className=\"right-5 bottom-5\">\n            <button\n              className=\"bg-primary text-primary-foreground rounded-full px-4 py-2 text-sm font-medium shadow-md transition-transform duration-150 ease-[cubic-bezier(0.23,1,0.32,1)] active:scale-[0.97]\"\n              type=\"button\"\n            >\n              Read More\n            </button>\n          </CutoutCardAction>\n        </CutoutCard>\n      </div>\n    </div>\n  )\n}\n\nexport default CutoutCardDemo\n",
      "type": "registry:component"
    }
  ]
}