); } `,__src__:"registry/default/examples/mockups/iphone-16-pro-1.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Iphone16Pro "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/mockups/iphone-16-pro"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" iPhone16ProDemo"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"relative"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"Iphone16Pro"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"https://res.cloudinary.com/deelfmnhg/image/upload/v1733892005/Neon_Graaadients_D1_1_icds31.jpg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"h-80 w-full"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(p,{defaultValue:"cli",children:[(0,n.jsxs)(t,{children:[(0,n.jsx)(h,{value:"cli",children:"CLI"}),(0,n.jsx)(h,{value:"manual",children:"Manual"})]}),(0,n.jsx)(i,{value:"cli",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add "https://designali.in/r/iphone-16-pro" `,__npmCommand__:`npx shadcn@latest add "https://designali.in/r/iphone-16-pro" `,__yarnCommand__:`npx shadcn@latest add "https://designali.in/r/iphone-16-pro" `,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://designali.in/r/iphone-16-pro" `,__bunCommand__:`bunx --bun shadcn@latest add "https://designali.in/r/iphone-16-pro" `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "https://designali.in/r/iphone-16-pro"'})]})})})})}),(0,n.jsx)(i,{value:"manual",children:(0,n.jsxs)(d,{children:[(0,n.jsx)(c,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(a,{name:"iphone-16-pro",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import type { SVGProps } from "react"; export interface Iphone16ProProps extends SVGProps { width?: number; height?: number; src?: string; } export function Iphone16Pro({ width = 200, height = 400, src, ...props }: Iphone16ProProps) { return ( ); } `,__src__:"registry/default/ui/mockups/iphone-16-pro.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { SVGProps } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" interface"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Iphone16ProProps"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" extends"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" SVGProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"SVGSVGElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Iphone16Pro"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 200"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 400"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Iphone16ProProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{width}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{height}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" viewBox"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`0 0 ${"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"} ${"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" xmlns"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#303333"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"M194.85,127.85c0-.25-.2-.45-.44-.45-.11.04-.37.03-.68,0V36.12c0-17.91-14.29-32.42-31.91-32.42H38.17C20.55,3.7,6.26,18.21,6.26,36.12v49.16c-.3.02-.55.03-.65-.02-.24,0-.44.2-.44.45,0,0,0,17.36,0,17.36-.03.41.5.49,1.09.48v13.68c-.6,0-1.13.08-1.09.49,0,0,0,28.64,0,28.64-.03.42.5.49,1.09.48v7.98c-.6,0-1.13.08-1.09.49,0,0,0,28.64,0,28.64-.03.42.5.49,1.09.48v179.5c0,17.91,14.29,32.42,31.91,32.42h123.65c17.62,0,31.91-14.52,31.91-32.42v-189.55c.31-.02.57-.03.68.04,1.25.1.03-46.11.44-46.55ZM187.32,363.23c0,13.61-13.25,26.65-26.64,26.65H39.32c-13.39,0-26.62-13.04-26.62-26.65V36.8c0-13.61,13.22-26.69,26.62-26.69h121.36c13.39,0,26.64,13.08,26.64,26.69v326.43Z"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#000000"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"M161.38,5.89H38.78c-16.54,0-29.95,13.5-29.95,30.15v327.79c0,16.65,13.41,30.15,29.95,30.15h122.6c16.54,0,29.95-13.5,29.95-30.15V36.05c0-16.65-13.41-30.15-29.95-30.15ZM187.32,363.65c0,13.69-12.28,26.24-25.87,26.24H38.7c-13.6,0-26-12.55-26-26.24V36.24c0-13.69,11.42-26.13,25.02-26.13h122.75c13.6,0,26.85,12.44,26.85,26.13v327.4Z"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"rect"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" x"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"12.7"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" y"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"10.11"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"174.62"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"379.78"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" rx"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"26.97"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ry"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"26.97"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {src "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" href"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{src}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" x"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"12.7"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" y"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"10.11"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"174.62"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"379.78"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" preserveAspectRatio"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"xMidYMid slice"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" clipPath"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"url(#roundedCorners)"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#000000"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"M119.61,32.33h-38.93c-10.48-.18-10.5-15.78,0-15.96,0,0,38.93,0,38.93,0,4.41,0,7.98,3.57,7.98,7.98,0,4.41-3.57,7.98-7.98,7.98Z"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#080d4c"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"M118.78,27.68c-4.32.06-4.32-6.73,0-6.66,4.32-.06,4.32,6.73,0,6.66Z"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"defs"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"clipPath"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"roundedCorners"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"rect"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#ffffff"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" x"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"12.7"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" y"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"10.11"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"174.62"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"379.78"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" rx"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"26.97"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ry"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"26.97"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,n.jsx)(c,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"iphone-16",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#iphone-16",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"iPhone 16"]}),` `,(0,n.jsx)(s,{name:"iphone-16",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import type { SVGProps } from "react"; export interface Iphone16Props extends SVGProps { width?: number; height?: number; src?: string; } export function Iphone16({ width = 200, height = 400, src, ...props }: Iphone16Props) { return ( ); } `,__src__:"registry/default/ui/mockups/iphone-16.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" type"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { SVGProps } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" interface"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Iphone16Props"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" extends"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" SVGProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"SVGSVGElement"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Iphone16"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 200"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 400"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" src"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Iphone16Props"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{width}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{height}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" viewBox"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`0 0 ${"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"width"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"} ${"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"height"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" xmlns"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#303333"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"M196.11,128.09c0-.25-.2-.45-.45-.45-.11.04-.37.03-.69,0V36.69c0-17.84-14.46-32.31-32.31-32.31H37.48C19.63,4.39,5.17,18.85,5.17,36.69v48.99c-.3.02-.55.03-.66-.02-.25,0-.45.2-.45.45,0,0,0,17.29,0,17.29-.03.41.5.49,1.11.48v13.63c-.61,0-1.14.08-1.11.48,0,0,0,28.54,0,28.54-.03.42.5.49,1.11.48v7.95c-.61,0-1.14.08-1.11.48,0,0,0,28.54,0,28.54-.03.42.5.49,1.11.48v178.86c0,17.84,14.46,32.31,32.31,32.31h125.2c17.84,0,32.31-14.46,32.31-32.31v-188.87c.32-.02.58-.03.69.04,1.26.1.03-45.94.45-46.38ZM186.07,362.63c0,13.56-10.99,24.56-24.56,24.56H38.64c-13.56,0-24.56-10.99-24.56-24.56V37.37c0-13.56,10.99-24.56,24.56-24.56h122.87c13.56,0,24.56,10.99,24.56,24.56v325.26Z"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#000000"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"M161.38,7.29H38.78c-16.54,0-29.95,13.41-29.95,29.95v325.52c0,16.54,13.41,29.95,29.95,29.95h122.6c16.54,0,29.95-13.41,29.95-29.95V37.24c0-16.54-13.41-29.95-29.95-29.95ZM186.07,362.57c0,13.6-11.02,24.62-24.62,24.62H38.7c-13.6,0-24.62-11.02-24.62-24.62V37.43c0-13.6,11.02-24.62,24.62-24.62h122.75c13.6,0,24.62,11.02,24.62,24.62v325.14Z"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"rect"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" x"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"14.08"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" y"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"12.81"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"171.98"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"374.37"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" rx"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"24.62"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ry"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"24.62"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {src "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"image"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" href"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{src}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" x"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"14.08"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" y"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"12.81"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"171.98"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"374.37"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" rx"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"24.62"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ry"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"24.62"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" preserveAspectRatio"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"xMidYMid slice"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" clipPath"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"url(#roundedCorners)"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#000000"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"M119.61,33.86h-38.93c-10.48-.18-10.5-15.78,0-15.96,0,0,38.93,0,38.93,0,4.41,0,7.98,3.57,7.98,7.98,0,4.41-3.57,7.98-7.98,7.98Z"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#080d4c"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"M118.78,29.21c-4.32.06-4.32-6.73,0-6.66,4.32-.06,4.32,6.73,0,6.66Z"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"defs"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"clipPath"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"roundedCorners"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"rect"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"#ffffff"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" x"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"14.08"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" y"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"12.81"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" width"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"171.98"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" height"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"374.37"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" rx"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"24.62"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" ry"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"24.62"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"props",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Props"]})]})}function B(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(m,{...e})}):m(e)}function r(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(M);})(); ;return Component;

iPhone

iPhone 16 Pro

Installation

iPhone 16

Props