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
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mockup to your project and fits it to your theme.
Code
How Mockup is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"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://cdn.21st.dev/assets/mirror/86/867a175524a0966eb144327b962159fa1ac4e1822b0cd857759b754306f3b0d4.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://cdn.21st.dev/assets/mirror/94/9462eb311c6355c61f50fa75def0a1afa3282b8f987f77400db7358ffebff1c0.png"
alt="Mobile application"
width={350}
height={700}
className="w-full"
/>
</Mockup>
</MockupFrame>
);
}
Dependencies
More by Mikolaj Dobrucki
View all
Hero Section
1.4K
CTA with Rectangle
272
Pricing Section
173
CTA with Glow
149
Screenshot
1
More in Cards
View all
Stats cards with links
39
Statistics Card 2
261
Course Design Cards
1.1K
The Item one
3
Card
70
Card Studio
7
Statistics Card 7
289
Card
17
