@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.