How do I use Phone in my project?

Copy the PhoneMockupCard source code from https://opensourceui.in/components/phone, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Phone in a commercial project?

Yes. Opensource UI is MIT licensed. You can use PhoneMockupCard in personal and commercial projects without UI attribution.

Back to Mockups Components / Mockups

Phone

iPhone 15 Pro frame with Dynamic Island and a full-screen preview slot. Pass variant for purple, orange, white, titanium, or cherry finishes. Use visibleRatio to crop from the top, and showDynamicIsland to toggle the island and camera.

Preview

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/mockups/phone-mockup-card.tsx in your project.
4
Import and render:
Example
import { PhoneMockupCard } from "@/components/mockups/phone-mockup-card";
<PhoneMockupCard variant="orange" visibleRatio={2 / 3} showDynamicIsland={false} />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/mockups/phone-mockup-card.tsx

1
2
// Full source: components/components/mockups/phone-mockup-card.tsx
// The Cloudflare worker does not expose the source tree at request time.

Back to Mockups Components / Mockups

Phone

Preview

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/mockups/phone-mockup-card.tsx in your project.
4
Import and render:
Example
import { PhoneMockupCard } from "@/components/mockups/phone-mockup-card";
<PhoneMockupCard variant="orange" visibleRatio={2 / 3} showDynamicIsland={false} />

lib/cn.ts

1
2
3
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/mockups/phone-mockup-card.tsx

1
2
// Full source: components/components/mockups/phone-mockup-card.tsx
// The Cloudflare worker does not expose the source tree at request time.