Logo/Mockup

Hello World

Lets get started making your first mockup component.

1. Setup basic project

Create new React project, here we will be creating a basic NextJS project with tailwind css. You can do that by running npx create-next-app@latest command. Know more at NextJS.org

2. Create a file

After having a project setup, create a folder called components and in it create a file called MacbookMockup.tsx or .jsx if you are using plan JS.

3. Getting the Code

Copy the following minified code and paste it in the file you just created.

For Typescript

export default function MacbookMockup({children}:{children:React.ReactNode;}){return(<svg fill="none" className="h-full w-full" viewBox="0 0 1216 735" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"><g clipPath="url(#m)"><path d="m1216 689.85v-4.6h-1216v4.6c0 13.441 0 20.162 2.6158 25.296 2.301 4.516 5.9725 8.187 10.488 10.488 5.1339 2.616 11.854 2.616 25.296 2.616h1139.2c13.44 0 20.16 0 25.3-2.616 4.51-2.301 8.18-5.972 10.48-10.488 2.62-5.134 2.62-11.855 2.62-25.296z" fill="url(#j)"/><path d="m1146 731.25c1.6-0.4 2.67-2.167 3-3h-79.5c0.33 0.833 1.4 2.6 3 3 0.17 1.167 0.9 3.5 2.5 3.5h68.5c1.6 0 2.33-2.333 2.5-3.5z" fill="url(#i)"/><path d="m1145.9 731.66v-0.156h-73.39c0.23 1.22 0.97 3.25 2.46 3.25h68.5c1.43 0 2.17-1.865 2.43-3.094z" clipRule="evenodd" fill="url(#h)" fillRule="evenodd"/><path d="m1145.9 731.5v0.156c-0.08 0.348-0.19 0.746-0.34 1.139h-72.68c-0.18-0.453-0.3-0.914-0.37-1.295h73.39z" clipRule="evenodd" fill="#383838" fillRule="evenodd"/><path d="m142.5 731.25c1.6-0.4 2.667-2.167 3-3h-79.5c0.3333 0.833 1.4 2.6 3 3 0.1667 1.167 0.9 3.5 2.5 3.5h68.5c1.6 0 2.333-2.333 2.5-3.5z" fill="url(#g)"/><path d="m142.43 731.66v-0.156h-73.387c0.2278 1.22 0.9661 3.25 2.4586 3.25h68.5c1.43 0 2.168-1.865 2.428-3.094z" clipRule="evenodd" fill="url(#f)" fillRule="evenodd"/><path d="m142.43 731.5v0.156c-0.074 0.348-0.185 0.746-0.34 1.139h-72.676c-0.1785-0.453-0.2996-0.914-0.3708-1.295h73.386z" clipRule="evenodd" fill="#383838" fillRule="evenodd"/><path d="m502 685.25h211.5c0 9.113-7.387 16.5-16.5 16.5h-178.5c-9.113 0-16.5-7.387-16.5-16.5z" fill="url(#e)"/><path d="m712.99 685.75c-0.264 8.605-7.323 15.5-15.992 15.5h-178.5c-8.669 0-15.728-6.895-15.992-15.5h210.48z" stroke="#fff" strokeOpacity=".1"/><rect x="1121.5" y="685.25" width="81" height="33" fill="url(#d)"/><rect transform="matrix(-1 0 0 1 84.5 685.25)" width="84" height="33" fill="url(#c)"/><g filter="url(#l)"><path d="m1192.5 685.25h13v20.112c0 4.357-3.53 7.888-7.89 7.888-2.82 0-5.11-2.289-5.11-5.112v-22.888z" fill="#D2D2DA"/></g><g filter="url(#k)"><path d="m20.5 685.25h-11v21.326c0 3.686 2.9881 6.674 6.6742 6.674 2.3891 0 4.3258-1.937 4.3258-4.326v-23.674z" fill="#D2D2DA"/></g></g><path d="m608.5 2.25h470c15.46 0 28 12.536 28 28v653h-996.5v-653c0-15.464 12.536-28 28-28h470.5z" fill="#000"/><path d="m1078.5 4.25h-940.5c-14.359 0-26 11.641-26 26v651h992.5v-651c0-14.359-11.64-26-26-26zm0-2h-940.5c-15.464 0-28 12.536-28 28v653h996.5v-653c0-15.464-12.54-28-28-28z" clipRule="evenodd" fill="#201F24" fillRule="evenodd"/><path d="m1108.5 685.25h-1000.5v-655c0-16.568 13.431-30 30-30h940.5c16.57 0 30 13.432 30 30v655zm-30-683h-940.5c-15.464 0-28 12.536-28 28v653h996.5v-653c0-15.464-12.54-28-28-28z" clipRule="evenodd" fill="#7D7D7F" fillRule="evenodd"/><path d="m112.85 657.25h990.65v19c0 2.209-1.79 4-4 4h-982.65c-2.209 0-4-1.791-4-4v-19z" fill="url(#b)"/><clipPath id="clipPath"><path d="m124.5 32.25c0-7.732 6.268-14 14-14h939c7.73 0 14 6.268 14 14v614h-967v-614z"/></clipPath><foreignObject x="124.5" y="18.3" width="967" height="628" clipPath="url(#clipPath)"><div style={{width:"100%",height:"100%",overflow:"hidden"}}>{children}</div></foreignObject><path d="m667 20.75c0-2.5 3-2.5 4.5-2.5h-127c1.5 0 4.5 0 4.5 2.5v9.5c0 4.4183 3.582 8 8 8h102c4.418 0 8-3.5817 8-8v-9.5z" fill="#000"/><circle cx="608" cy="24.341" r="3.779" fill="#0F0F0F" stroke="#151515" strokeWidth=".26062"/><circle cx="607.61" cy="25.253" r=".91218" fill="#16181E"/><circle cx="607.61" cy="23.95" r=".91218" fill="#0A0B0D"/><circle cx="608" cy="24.341" r="1.3031" fill="#1F2531" opacity=".6"/><defs><filter id="l" x="1184.5" y="677.25" width="29" height="44" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse"><feFlood floodOpacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_601_140" stdDeviation="4"/></filter><filter id="k" x="-.5" y="675.25" width="31" height="48" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse"><feFlood floodOpacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_601_140" stdDeviation="5"/></filter><pattern id="a" width="1" height="1" patternContentUnits="objectBoundingBox"/><linearGradient id="j" x1="608" x2="608" y1="685.25" y2="728.25" gradientUnits="userSpaceOnUse"><stop stopColor="#AEAFB4" offset="0"/><stop stopColor="#AFB0B5" offset=".19252"/><stop stopColor="#AFB0B5" offset=".37609"/><stop stopColor="#7D7E82" offset=".59896"/><stop stopColor="#696A6F" offset=".71354"/><stop stopColor="#838489" offset=".85212"/><stop stopColor="#ABACB0" offset=".93136"/></linearGradient><linearGradient id="i" x1="1069.5" x2="1149" y1="731.5" y2="731.5" gradientUnits="userSpaceOnUse"><stop stopColor="#8C8D91" offset="0"/><stop stopColor="#525358" offset=".17301"/><stop stopColor="#78797D" offset=".31824"/><stop stopColor="#A0A0A2" offset=".46503"/><stop stopColor="#9A9A9C" offset=".69146"/><stop stopColor="#4F5055" offset=".82575"/><stop stopColor="#9E9EA0" offset=".94131"/><stop stopColor="#848589" offset="1"/></linearGradient><linearGradient id="h" x1="1072.5" x2="1145.9" y1="733.12" y2="733.12" gradientUnits="userSpaceOnUse"><stop stopColor="#575757" offset="0"/><stop stopColor="#2D2D2D" offset=".082785"/><stop stopColor="#4E4E4E" offset=".49048"/><stop stopColor="#2A2A2A" offset=".82481"/><stop stopColor="#5C5C5C" offset="1"/></linearGradient><linearGradient id="g" x1="66" x2="145.5" y1="731.5" y2="731.5" gradientUnits="userSpaceOnUse"><stop stopColor="#8C8D91" offset="0"/><stop stopColor="#525358" offset=".17301"/><stop stopColor="#78797D" offset=".31824"/><stop stopColor="#A0A0A2" offset=".46503"/><stop stopColor="#9A9A9C" offset=".69146"/><stop stopColor="#4F5055" offset=".82575"/><stop stopColor="#9E9EA0" offset=".94131"/><stop stopColor="#848589" offset="1"/></linearGradient><linearGradient id="f" x1="69.041" x2="142.43" y1="733.12" y2="733.12" gradientUnits="userSpaceOnUse"><stop stopColor="#575757" offset="0"/><stop stopColor="#2D2D2D" offset=".082785"/><stop stopColor="#4E4E4E" offset=".49048"/><stop stopColor="#2A2A2A" offset=".82481"/><stop stopColor="#5C5C5C" offset="1"/></linearGradient><linearGradient id="e" x1="502.5" x2="713.5" y1="693.25" y2="693.25" gradientUnits="userSpaceOnUse"><stop stopColor="#25262B" offset="0"/><stop stopColor="#606166" offset=".015659"/><stop stopColor="#9FA0A4" offset=".035819"/><stop stopColor="#C8C8CE" offset=".050435"/><stop stopColor="#D7D8DD" offset=".47917"/><stop stopColor="#CBCBD3" offset=".94121"/><stop stopColor="#A7A8AC" offset=".9704"/><stop stopColor="#595A5E" offset=".98013"/><stop stopColor="#27282C" offset="1"/></linearGradient><linearGradient id="d" x1="1202.5" x2="1121.5" y1="702.25" y2="702.25" gradientUnits="userSpaceOnUse"><stop stopColor="#65666B" stopOpacity="0" offset="0"/><stop stopColor="#65666B" offset=".25992"/><stop stopColor="#65666B" stopOpacity="0" offset="1"/></linearGradient><linearGradient id="c" x1="84" x2="2.8751e-8" y1="17" y2="17" gradientUnits="userSpaceOnUse"><stop stopColor="#65666B" stopOpacity="0" offset="0"/><stop stopColor="#65666B" offset=".25992"/><stop stopColor="#65666B" stopOpacity="0" offset="1"/></linearGradient><linearGradient id="b" x1="607.5" x2="607.5" y1="657.25" y2="680.25" gradientUnits="userSpaceOnUse"><stop stopColor="#222" offset="0"/><stop stopColor="#242424" offset=".085211"/><stop stopColor="#242424" offset=".83043"/><stop stopColor="#201F24" offset="1"/></linearGradient><clipPath id="m"><rect transform="translate(0 685.25)" width="1216" height="49.5" fill="#fff"/></clipPath></defs></svg>)}

For plane JavaScript

export default function MacbookMockup(children){return(<svg fill="none" className="h-full w-full" viewBox="0 0 1216 735" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"><g clipPath="url(#m)"><path d="m1216 689.85v-4.6h-1216v4.6c0 13.441 0 20.162 2.6158 25.296 2.301 4.516 5.9725 8.187 10.488 10.488 5.1339 2.616 11.854 2.616 25.296 2.616h1139.2c13.44 0 20.16 0 25.3-2.616 4.51-2.301 8.18-5.972 10.48-10.488 2.62-5.134 2.62-11.855 2.62-25.296z" fill="url(#j)"/><path d="m1146 731.25c1.6-0.4 2.67-2.167 3-3h-79.5c0.33 0.833 1.4 2.6 3 3 0.17 1.167 0.9 3.5 2.5 3.5h68.5c1.6 0 2.33-2.333 2.5-3.5z" fill="url(#i)"/><path d="m1145.9 731.66v-0.156h-73.39c0.23 1.22 0.97 3.25 2.46 3.25h68.5c1.43 0 2.17-1.865 2.43-3.094z" clipRule="evenodd" fill="url(#h)" fillRule="evenodd"/><path d="m1145.9 731.5v0.156c-0.08 0.348-0.19 0.746-0.34 1.139h-72.68c-0.18-0.453-0.3-0.914-0.37-1.295h73.39z" clipRule="evenodd" fill="#383838" fillRule="evenodd"/><path d="m142.5 731.25c1.6-0.4 2.667-2.167 3-3h-79.5c0.3333 0.833 1.4 2.6 3 3 0.1667 1.167 0.9 3.5 2.5 3.5h68.5c1.6 0 2.333-2.333 2.5-3.5z" fill="url(#g)"/><path d="m142.43 731.66v-0.156h-73.387c0.2278 1.22 0.9661 3.25 2.4586 3.25h68.5c1.43 0 2.168-1.865 2.428-3.094z" clipRule="evenodd" fill="url(#f)" fillRule="evenodd"/><path d="m142.43 731.5v0.156c-0.074 0.348-0.185 0.746-0.34 1.139h-72.676c-0.1785-0.453-0.2996-0.914-0.3708-1.295h73.386z" clipRule="evenodd" fill="#383838" fillRule="evenodd"/><path d="m502 685.25h211.5c0 9.113-7.387 16.5-16.5 16.5h-178.5c-9.113 0-16.5-7.387-16.5-16.5z" fill="url(#e)"/><path d="m712.99 685.75c-0.264 8.605-7.323 15.5-15.992 15.5h-178.5c-8.669 0-15.728-6.895-15.992-15.5h210.48z" stroke="#fff" strokeOpacity=".1"/><rect x="1121.5" y="685.25" width="81" height="33" fill="url(#d)"/><rect transform="matrix(-1 0 0 1 84.5 685.25)" width="84" height="33" fill="url(#c)"/><g filter="url(#l)"><path d="m1192.5 685.25h13v20.112c0 4.357-3.53 7.888-7.89 7.888-2.82 0-5.11-2.289-5.11-5.112v-22.888z" fill="#D2D2DA"/></g><g filter="url(#k)"><path d="m20.5 685.25h-11v21.326c0 3.686 2.9881 6.674 6.6742 6.674 2.3891 0 4.3258-1.937 4.3258-4.326v-23.674z" fill="#D2D2DA"/></g></g><path d="m608.5 2.25h470c15.46 0 28 12.536 28 28v653h-996.5v-653c0-15.464 12.536-28 28-28h470.5z" fill="#000"/><path d="m1078.5 4.25h-940.5c-14.359 0-26 11.641-26 26v651h992.5v-651c0-14.359-11.64-26-26-26zm0-2h-940.5c-15.464 0-28 12.536-28 28v653h996.5v-653c0-15.464-12.54-28-28-28z" clipRule="evenodd" fill="#201F24" fillRule="evenodd"/><path d="m1108.5 685.25h-1000.5v-655c0-16.568 13.431-30 30-30h940.5c16.57 0 30 13.432 30 30v655zm-30-683h-940.5c-15.464 0-28 12.536-28 28v653h996.5v-653c0-15.464-12.54-28-28-28z" clipRule="evenodd" fill="#7D7D7F" fillRule="evenodd"/><path d="m112.85 657.25h990.65v19c0 2.209-1.79 4-4 4h-982.65c-2.209 0-4-1.791-4-4v-19z" fill="url(#b)"/><clipPath id="clipPath"><path d="m124.5 32.25c0-7.732 6.268-14 14-14h939c7.73 0 14 6.268 14 14v614h-967v-614z"/></clipPath><foreignObject x="124.5" y="18.3" width="967" height="628" clipPath="url(#clipPath)"><div style={{width:"100%",height:"100%",overflow:"hidden"}}>{children}</div></foreignObject><path d="m667 20.75c0-2.5 3-2.5 4.5-2.5h-127c1.5 0 4.5 0 4.5 2.5v9.5c0 4.4183 3.582 8 8 8h102c4.418 0 8-3.5817 8-8v-9.5z" fill="#000"/><circle cx="608" cy="24.341" r="3.779" fill="#0F0F0F" stroke="#151515" strokeWidth=".26062"/><circle cx="607.61" cy="25.253" r=".91218" fill="#16181E"/><circle cx="607.61" cy="23.95" r=".91218" fill="#0A0B0D"/><circle cx="608" cy="24.341" r="1.3031" fill="#1F2531" opacity=".6"/><defs><filter id="l" x="1184.5" y="677.25" width="29" height="44" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse"><feFlood floodOpacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_601_140" stdDeviation="4"/></filter><filter id="k" x="-.5" y="675.25" width="31" height="48" colorInterpolationFilters="sRGB" filterUnits="userSpaceOnUse"><feFlood floodOpacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_601_140" stdDeviation="5"/></filter><pattern id="a" width="1" height="1" patternContentUnits="objectBoundingBox"/><linearGradient id="j" x1="608" x2="608" y1="685.25" y2="728.25" gradientUnits="userSpaceOnUse"><stop stopColor="#AEAFB4" offset="0"/><stop stopColor="#AFB0B5" offset=".19252"/><stop stopColor="#AFB0B5" offset=".37609"/><stop stopColor="#7D7E82" offset=".59896"/><stop stopColor="#696A6F" offset=".71354"/><stop stopColor="#838489" offset=".85212"/><stop stopColor="#ABACB0" offset=".93136"/></linearGradient><linearGradient id="i" x1="1069.5" x2="1149" y1="731.5" y2="731.5" gradientUnits="userSpaceOnUse"><stop stopColor="#8C8D91" offset="0"/><stop stopColor="#525358" offset=".17301"/><stop stopColor="#78797D" offset=".31824"/><stop stopColor="#A0A0A2" offset=".46503"/><stop stopColor="#9A9A9C" offset=".69146"/><stop stopColor="#4F5055" offset=".82575"/><stop stopColor="#9E9EA0" offset=".94131"/><stop stopColor="#848589" offset="1"/></linearGradient><linearGradient id="h" x1="1072.5" x2="1145.9" y1="733.12" y2="733.12" gradientUnits="userSpaceOnUse"><stop stopColor="#575757" offset="0"/><stop stopColor="#2D2D2D" offset=".082785"/><stop stopColor="#4E4E4E" offset=".49048"/><stop stopColor="#2A2A2A" offset=".82481"/><stop stopColor="#5C5C5C" offset="1"/></linearGradient><linearGradient id="g" x1="66" x2="145.5" y1="731.5" y2="731.5" gradientUnits="userSpaceOnUse"><stop stopColor="#8C8D91" offset="0"/><stop stopColor="#525358" offset=".17301"/><stop stopColor="#78797D" offset=".31824"/><stop stopColor="#A0A0A2" offset=".46503"/><stop stopColor="#9A9A9C" offset=".69146"/><stop stopColor="#4F5055" offset=".82575"/><stop stopColor="#9E9EA0" offset=".94131"/><stop stopColor="#848589" offset="1"/></linearGradient><linearGradient id="f" x1="69.041" x2="142.43" y1="733.12" y2="733.12" gradientUnits="userSpaceOnUse"><stop stopColor="#575757" offset="0"/><stop stopColor="#2D2D2D" offset=".082785"/><stop stopColor="#4E4E4E" offset=".49048"/><stop stopColor="#2A2A2A" offset=".82481"/><stop stopColor="#5C5C5C" offset="1"/></linearGradient><linearGradient id="e" x1="502.5" x2="713.5" y1="693.25" y2="693.25" gradientUnits="userSpaceOnUse"><stop stopColor="#25262B" offset="0"/><stop stopColor="#606166" offset=".015659"/><stop stopColor="#9FA0A4" offset=".035819"/><stop stopColor="#C8C8CE" offset=".050435"/><stop stopColor="#D7D8DD" offset=".47917"/><stop stopColor="#CBCBD3" offset=".94121"/><stop stopColor="#A7A8AC" offset=".9704"/><stop stopColor="#595A5E" offset=".98013"/><stop stopColor="#27282C" offset="1"/></linearGradient><linearGradient id="d" x1="1202.5" x2="1121.5" y1="702.25" y2="702.25" gradientUnits="userSpaceOnUse"><stop stopColor="#65666B" stopOpacity="0" offset="0"/><stop stopColor="#65666B" offset=".25992"/><stop stopColor="#65666B" stopOpacity="0" offset="1"/></linearGradient><linearGradient id="c" x1="84" x2="2.8751e-8" y1="17" y2="17" gradientUnits="userSpaceOnUse"><stop stopColor="#65666B" stopOpacity="0" offset="0"/><stop stopColor="#65666B" offset=".25992"/><stop stopColor="#65666B" stopOpacity="0" offset="1"/></linearGradient><linearGradient id="b" x1="607.5" x2="607.5" y1="657.25" y2="680.25" gradientUnits="userSpaceOnUse"><stop stopColor="#222" offset="0"/><stop stopColor="#242424" offset=".085211"/><stop stopColor="#242424" offset=".83043"/><stop stopColor="#201F24" offset="1"/></linearGradient><clipPath id="m"><rect transform="translate(0 685.25)" width="1216" height="49.5" fill="#fff"/></clipPath></defs></svg>)}

4. Using it

Now you can use the Macbook Mockup anywhere. It can be used like this -

<MacbookMockup>
    <div className="bg-sky-200 h-full w-full flex items-center justify-center">
        <p className="text-5xl">Hello, World!</p>
    </div>
    {/* Or any other element */}
</MacbookMockup>

And that's it!

NEXT

Components/Customization