MacBook Mockup

CSS-only MacBook device frames for showcasing websites and desktop apps.

Your Website

1import { MacBookMockup } from "@/zeroui/components/mockups";
2
3export default function Example() {

Pro 16"

Pro 14"

Air 15"

Air 13"

1<MacBookMockup model="pro-16" />
2<MacBookMockup model="pro-14" />
3<MacBookMockup model="air-15" />

Space Gray

Silver

Midnight

Starlight

1<MacBookMockup color="space-gray" />
2<MacBookMockup color="silver" />
3<MacBookMockup color="midnight" />

name	type	default	description
children	ReactNode	-	-
model	"pro-16" \| "pro-14" \| "air-15" \| "air-13"	"pro-14"	-
color	"space-gray" \| "silver" \| "midnight" \| "starlight"	"space-gray"	-
className	string	""	-
screenClassName	string	""	-