Components
TabletScreen
The iPad / Tablet Screen component is a sleek, modern UI element designed to simulate a tablet device for app previews or responsive layouts. It features a large rectangular display with smoothly rounded corners, giving a realistic tablet look. Optional side bezels or a Smart Connector slot add extra realism, while the inner screen is fully customizable to display any children content. The component works seamlessly in both light and dark themes and includes subtle shadowing to give depth and a professional, clean appearance. Perfect for showcasing tablet UI designs, dashboards, or interactive demos in a polished presentation.
Loading preview...
import TabletScreen from "@/components/ui/tablet-screen";
export default function DemoOne() {
return (
<div className="flex justify-center items-center min-h-screen p-4">
<TabletScreen
width="600px"
height="850px"
rounded={true}
shadow={true}
connector={true}
>
{/* Example content inside the tablet screen */}
<div className="w-full h-full flex flex-col justify-center items-center bg-blue-100 dark:bg-blue-900 text-gray-900 dark:text-gray-100 rounded-xl">
<h1 className="text-3xl font-bold mb-4">Tablet App Preview</h1>
<p className="text-lg text-center px-4">
This area represents your tablet content. You can add any
components, dashboards, or mockups here.
</p>
</div>
</TabletScreen>
</div>
);
}