Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@codinix/device-mockup) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@codinix/device-mockup

📱🖥️ Beautiful and responsive device mockups built with React and Tailwind CSS — phone, tablet, laptop, desktop — all with realistic frames and perfect proportions.
Ideal for portfolios, UI showcases, landing pages, or client demos.

✨ Features

✅ Easy-to-use: <Device type="phone">...</Device>
✅ Fully responsive and scalable
✅ Pixel-perfect frames: not screenshots
✅ Supports phone, tablet, laptop, desktop
✅ Works with any content: components, iframes, apps
✅ Optional keyboard/stand assets for ultra-realism
✅ TypeScript support

📦 Installation

npm install @codinix/device-mockup
# or
yarn add @codinix/device-mockup

⚠️ Using React 19+?
Run with:

npm install @codinix/device-mockup --legacy-peer-deps

🔧 Usage

Smart wrapper

import { Device } from "@codinix/device-mockup";

<Device type="tablet">
  <iframe
    src="https://your-app.vercel.app"
    className="w-full h-full"
    frameBorder="0"
  />
</Device>

🤝 Credits

Crafted by Cleopatra Ropot
Packaged under the Codinix open component standard.