@codinix/device-mockup/README.md

Beautiful responsive mockups for phone, tablet, laptop and desktop — React components, no images needed.

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

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

> ⚠️ Using **React 19+**?  
Run with:

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

---

## 🔧 Usage

### Smart wrapper

```tsx
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](https://cleopatra-ropot.vercel.app)  
Packaged under the Codinix open component standard.