shadcn/app/public/registry/styles/default/iphone-15-pro.json

{
  "name": "iphone-15-pro",
  "description": "iPhone 15 Pro device mockup",
  "files": [
    {
      "name": "iphone-15-pro.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface IPhone15ProProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n  variant?: \"default\" | \"pro-max\" | \"mini\"\n  color?: \"black\" | \"white\" | \"blue\" | \"natural\"\n}\n\nconst IPhone15Pro = React.forwardRef<HTMLDivElement, IPhone15ProProps>(\n  (\n    { className, children, variant = \"default\", color = \"black\", ...props },\n    ref\n  ) => {\n    const colorClasses = {\n      black: \"bg-zinc-900 border-zinc-800\",\n      white: \"bg-zinc-100 border-zinc-300\",\n      blue: \"bg-blue-950 border-blue-900\",\n      natural: \"bg-stone-800 border-stone-700\",\n    }\n\n    return (\n      <div ref={ref} className={cn(\"inline-block\", className)} {...props}>\n        {/* iPhone Frame */}\n        <div\n          className={cn(\n            \"relative mx-auto rounded-[3rem] border-[14px] shadow-2xl\",\n            colorClasses[color]\n          )}\n          style={{\n            width:\n              variant === \"pro-max\"\n                ? \"430px\"\n                : variant === \"mini\"\n                  ? \"360px\"\n                  : \"393px\",\n            height:\n              variant === \"pro-max\"\n                ? \"932px\"\n                : variant === \"mini\"\n                  ? \"780px\"\n                  : \"852px\",\n          }}\n        >\n          {/* Dynamic Island */}\n          <div className=\"absolute left-1/2 top-0 z-10 h-8 w-32 -translate-x-1/2 rounded-b-3xl bg-black\" />\n\n          {/* Screen */}\n          <div className=\"relative h-full w-full overflow-hidden rounded-[2.5rem] bg-white\">\n            {children}\n          </div>\n\n          {/* Side Buttons */}\n          <div className=\"absolute -left-[17px] top-32 h-12 w-1 rounded-l-lg bg-zinc-800\" />\n          <div className=\"absolute -left-[17px] top-52 h-16 w-1 rounded-l-lg bg-zinc-800\" />\n          <div className=\"absolute -left-[17px] top-72 h-16 w-1 rounded-l-lg bg-zinc-800\" />\n          <div className=\"absolute -right-[17px] top-44 h-20 w-1 rounded-r-lg bg-zinc-800\" />\n        </div>\n      </div>\n    )\n  }\n)\nIPhone15Pro.displayName = \"IPhone15Pro\"\n\nexport { IPhone15Pro }\n"
    }
  ],
  "type": "components:ui"
}