Components
Mockup
A versatile component for showcasing applications and interfaces in different device frames. Provides a clean, modern presentation style with support for both desktop and mobile layouts.
Key Features:
- Responsive and mobile device frames
- Customizable frame sizes (small/large)
- Border and shadow effects for depth
- Theme-aware styling
- Flexible content container
Variants:
-
Responsive
- Clean, minimal frame
- Rounded corners
- Perfect for desktop applications
- Adapts to container width
-
Mobile
- Device-like appearance
- Larger corner radius
- Fixed maximum width
- Ideal for mobile app showcases
Loading preview...
"use client";
import { Mockup, MockupFrame } from "@/components/ui/mockup";
import Image from "next/image";
// Responsive Desktop Mockup Demo
export function MockupResponsive() {
return (
<MockupFrame>
<Mockup type="responsive">
<Image
src="https://www.launchuicomponents.com/app-light.png"
alt="Desktop application"
width={800}
height={450}
className="w-full"
/>
</Mockup>
</MockupFrame>
);
}
// Mobile Mockup Demo
export function MockupMobile() {
return (
<MockupFrame size="large">
<Mockup type="mobile">
<Image
src="https://www.launchuicomponents.com/mobile-app-light.png"
alt="Mobile application"
width={350}
height={700}
className="w-full"
/>
</Mockup>
</MockupFrame>
);
}