{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-flip-demo",
  "title": "Flip Card Demo",
  "description": "Demo showing Flip Card Component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/card-flip"
  ],
  "files": [
    {
      "path": "registry/demo/cards/card-flip/index.tsx",
      "content": "'use client';\nimport * as React from 'react';\nimport {\n  CardFlip,\n  CardFlipBack,\n  CardFlipFront,\n} from '@/components/systaliko-ui/cards/card-flip';\nimport { Button } from '@/components/systaliko-ui/shadcn/button';\nexport function CardFlipDemo() {\n  return (\n    <div className=\"container py-12\">\n      <div className=\"flex flex-wrap justify-center gap-4\">\n        <CardFlip className=\"h-96 w-2/6\">\n          <CardFlipFront className=\"rounded-xl\">\n            <img\n              width={1015}\n              height={678}\n              src=\"https://images.unsplash.com/photo-1655853548169-646b6e0f15ca?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n              alt=\"nike air jordan\"\n              className=\"size-full object-cover\"\n            />\n          </CardFlipFront>\n          <CardFlipBack className=\"flex flex-col items-center justify-center rounded-xl bg-secondary-foreground px-4 py-6 text-center text-secondary\">\n            <h2 className=\"text-xl font-bold\">Nike Air Jordan</h2>\n            <h4 className=\"mb-4\">€ 1,299.00</h4>\n            <Button size={'sm'} variant={'secondary'}>\n              Add to cart\n            </Button>\n          </CardFlipBack>\n        </CardFlip>\n\n        <CardFlip flipDirection=\"vertical\" className=\"h-96 w-2/6\">\n          <CardFlipFront className=\"rounded-xl\">\n            <img\n              width={542}\n              height={678}\n              src=\"https://images.unsplash.com/photo-1656944227425-5646be300a14?q=80&w=2527&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n              alt=\"nike air jordan\"\n              className=\"size-full object-cover\"\n            />\n          </CardFlipFront>\n          <CardFlipBack className=\"flex flex-col items-center justify-center rounded-xl bg-secondary-foreground px-4 py-6 text-center text-secondary\">\n            <h2 className=\"text-xl font-bold\">Nike Air Jordan</h2>\n            <h4 className=\"mb-4\">€ 1,299.00</h4>\n            <Button size={'sm'} variant={'secondary'}>\n              Add to cart\n            </Button>\n          </CardFlipBack>\n        </CardFlip>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/demo/cards/card-flip.tsx"
    }
  ],
  "type": "registry:ui"
}