div-phone

I've often used CSS to render physical devices on the canvas, wrapping {children} like interactive apps. The div-phone package is a lightweight solution that applies these same concepts to the iPhone.

Just import and wrap {children}, and you're done.

1npm install div-phone

1npm install div-phone

1import { Phone } from 'div-phone';
2
3export const Example = () => (
4	<Phone shadow>
5		<div className="h-full w-full bg-neutral-900 text-white">{/* Your app goes here. */}</div>
6	</Phone>
7);

1import { Phone } from 'div-phone';
2
3export const Example = () => (
4	<Phone shadow>
5		<div className="h-full w-full bg-neutral-900 text-white">{/* Your app goes here. */}</div>
6	</Phone>
7);

• children: React content rendered inside the phone screen.
• shadow: When true (default), applies the outer shadow.
• className: Optional classes added to the outer wrapper.

Because the component uses Tailwind classes, make sure your Tailwind config includes the package in content so classes are not purged:

1export default {
2	content: ['./src/**/*.{ts,tsx,js,jsx}', './node_modules/div-phone/**/*.{ts,tsx,js,jsx}'],
3};

1export default {
2	content: ['./src/**/*.{ts,tsx,js,jsx}', './node_modules/div-phone/**/*.{ts,tsx,js,jsx}'],
3};

This component uses modern Tailwind utilities like size-* and arbitrary values. If you run into missing styles, verify you are on Tailwind CSS v4 and using @tailwindcss/postcss v4 with PostCSS v8.

For Tailwind v4, your PostCSS config should include the Tailwind plugin:

1export default {
2	plugins: {
3		'@tailwindcss/postcss': {},
4	},
5};

1export default {
2	plugins: {
3		'@tailwindcss/postcss': {},
4	},
5};

Using div-phone for something cool? Tag me on 𝕏 with what you've built!