Components
Starting preview...
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: 1. Responsive - Clean, minimal frame - Rounded corners - Perfect for desktop applications - Adapts to container width 2. Mobile - Device-like appearance - Larger corner radius - Fixed maximum width - Ideal for mobile app showcases
@mikolajdobrucki
npx shadcn@latest add https://21st.dev/r/mikolajdobrucki/mockup"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>
);
}