Welcome to the docs for Mockup by D Singh. These pages describe how to use svg-mockup-kit — SVG device mockups for React, distributed on npm.
Intro image for the documentation.
svg-mockup-kit ships React components (today: MacbookMockup) built from vector artwork inspired by community mockups, adapted for real apps: drop any React subtree into the screen area and scale the frame with normal CSS.
The package itself has no runtime dependencies beyond React — install it like any other library, import named exports, and ship.
The idea is similar in spirit to shadcn/ui (simple, composable building blocks you control), but delivery is npm + versioned releases instead of copying source files out of a registry UI. You can still wrap or fork the components if you need project-specific behavior.
The library is MIT-licensed for commercial and personal use.
npm install svg-mockup-kit.import { MacbookMockup } from "svg-mockup-kit".<MacbookMockup> with your screen UI as children, and size the device with className / style on the root SVG.See Setup and Hello World for step-by-step instructions. API details (props, viewport size) match the package README on npm.
You should be comfortable with React and JSX, and with styling (CSS, Tailwind, or your stack of choice). Mockups are SVG-based; basic familiarity with SVG helps when debugging layout or foreignObject behavior.
If you are new to React, start with the official React documentation.
Contributions are welcome via issues and pull requests on the svg-mockup-kit and mockup (site) repositories on GitHub. That includes new devices, documentation fixes, and compatibility notes for browsers.
svg-mockup-kit is published under the MIT License. This documentation site follows the license of its own repository.
Inspired by Figma community mockups and the shadcn-style “own your UI” mindset. Thanks to the original vector/mockup authors in that ecosystem.