Logo/Mockup

version 0.1.0 alpha

The 'shadcn' of Mockups

Copy 'n paste pure vector mockups where ever you want

Get StartedView Examples

Scroll to know more ...

Note 📝

This project is still in development and ready to use only in React and its frameworks. The project is still in its early stages and may have some bugs.

Composition

Macbook composition

Base

  • 100% Vector
  • Scalable
  • Accurate depiction

Screen

  • True screen mask
  • No overlaying elements
  • Accurate depiction

Execution

function Mockup(children) {

return (

<svg>

...

<foreignObject>

<div style={...}>

{children}

</div>

</foreignObject>

...

<svg>

);

}

Thats it, just a foreignObject with a div inside. This is the most basic way to use the mockup. It provides a lot of flexibility and control over the content. Please note that the there are some limitations to this approach especially when it comes to transitions and animations.