{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mockup",
  "type": "registry:ui",
  "title": "Mockup",
  "description": "Device mockup frames for showcasing app screenshots.",
  "files": [
    {
      "path": "components/ui/mockup.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst mockupVariants = cva(\n  \"flex relative z-10 overflow-hidden shadow-2xl border border-border/70 dark:border-border/5 dark:border-t-border/15\",\n  {\n    variants: {\n      type: {\n        mobile: \"rounded-[48px] max-w-[350px]\",\n        responsive: \"rounded-md\",\n      },\n    },\n    defaultVariants: {\n      type: \"responsive\",\n    },\n  },\n);\n\nexport interface MockupProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof mockupVariants> {}\n\nfunction Mockup({ className, type, ...props }: MockupProps) {\n  return (\n    <div\n      data-slot=\"mockup\"\n      className={cn(mockupVariants({ type, className }))}\n      {...props}\n    />\n  );\n}\n\nconst frameVariants = cva(\n  \"bg-border/50 flex relative z-10 overflow-hidden rounded-2xl dark:bg-border/10\",\n  {\n    variants: {\n      size: {\n        small: \"p-2\",\n        large: \"p-4\",\n      },\n    },\n    defaultVariants: {\n      size: \"small\",\n    },\n  },\n);\n\nexport interface MockupFrameProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof frameVariants> {}\n\nfunction MockupFrame({ className, size, ...props }: MockupFrameProps) {\n  return (\n    <div\n      data-slot=\"mockup-frame\"\n      className={cn(frameVariants({ size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Mockup, MockupFrame };\n",
      "type": "registry:ui",
      "target": "components/ui/mockup.tsx"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ]
}