| title | React Device Mockups - Flowbite |
|---|---|
| description | Use the device mockups component to add content and screenshot previews of your application inside phone and tablet frames coded with Tailwind CSS and Flowbite |
The device mockup component can be used to feature a preview and screenshot of your application as if you would already use it on a mobile phone and it’s a great use case for hero and CTA sections.
This component is built using only the utility classes from Tailwind CSS and has built-in dark mode support so it’s easy to customize, it loads very fast and integrates perfectly with Tailwind CSS and Flowbite.
You can choose from multiple examples of mockups including phone, tablet, laptop, and even desktop devices with iOS or Android support.
To start using the mockup components you need to import them from flowbite-react:
import {
DefaultMockup,
DesktopMockup,
GooglePixelMockup,
IPhone12Mockup,
LaptopMockup,
SmartwatchMockup,
TabletMockup,
} from "flowbite-react";Use this example to show a standard phone mockup based on Tailwind CSS and add your app screenshot inside of it with dark mode support included.
Use this example to clearly show that the preview of your application is being used on an iPhone with iOS.
Use this alternative phone mockup example if you want to feature previews for android gadgets.
This component can be used to show an application preview inside of a responsive tablet mockup.
This example can be used to show a screenshot of your application inside a laptop mockup.
Use this example to show a preview of your application inside a desktop device such as an iMac.
This component can be used to showcase applications built for smartwatches.
You can easily update the color of the mockup by changing the background color with Tailwind CSS.
To learn more about how to customize the appearance of components, please see the Theme docs.