div-phone

I've often used CSS to render physical devices on the canvas, wrapping {children} around interactive apps. div-phone packages that idea into a responsive iPhone frame for React, built with Tailwind CSS.

The default phone finish is black, although the latest 1.1.0 release allows you to also use the color prop to change color to orange.

1npm install div-phone

1npm install div-phone

div-phone ships Tailwind utility classes rather than a compiled stylesheet. Tailwind CSS v4 ignores node_modules during automatic source detection, so register the package as a source in your main CSS file:

1@import 'tailwindcss';
2@source "../node_modules/div-phone/dist";

1@import 'tailwindcss';
2@source "../node_modules/div-phone/dist";

The @source path is relative to the CSS file. Adjust the number of ../ segments for your project structure.

If your project uses PostCSS, install the optional integration packages:

1npm install --save-dev postcss @tailwindcss/postcss

1npm install --save-dev postcss @tailwindcss/postcss

Then configure the Tailwind v4 plugin:

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

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

The black frame is the default phone color:

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

Select the orange finish with color="orange":

1import { Phone } from 'div-phone';
2
3export const OrangePhone = () => (
4	<Phone color="orange">
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 OrangePhone = () => (
4	<Phone color="orange">
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.
• className: Optional classes added to the outer wrapper.
• color: The phone frame finish, either "black" (default) or "orange".
• shadow: Applies the outer shadow and defaults to true.

The color union is also exported for use in your own component APIs:

1import type { PhoneColor } from 'div-phone';

1import type { PhoneColor } from 'div-phone';

• React 17, 18, or 19
• Tailwind CSS 4
• PostCSS 8 and @tailwindcss/postcss 4 when using the optional PostCSS integration
• Node.js 16.14 or newer

If the phone renders without its frame styling, confirm that:

1. Your application imports Tailwind with @import "tailwindcss".
2. Your CSS includes an @source path that resolves to node_modules/div-phone/dist.
3. You restarted the development server after installing or updating the package.

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