Components
MacLaptopScreen
The MacLaptopScreen component is a sleek, realistic Mac-style laptop frame designed to showcase content in a visually appealing way. It features a top bezel with functional-looking control buttons—red, yellow, and green—emulating the classic Mac window controls, along with a subtle camera dot at the center. The screen area is fully flexible, allowing you to embed images, dashboards, apps, or any React components. Rounded corners, soft shadows, and dark/light theme support give it a polished, modern look, making it ideal for UI previews, dashboards, or showcasing projects in a professional mockup style.
import MacLaptopScreen from "@/components/ui/mac-laptop-screen";
export default function DemoOne() {
return (
<div className="flex justify-center items-center min-h-screen">
<MacLaptopScreen width="760px" height="500px">
{/* Screen Content: Image Example */}
{/*<img
src="https://via.placeholder.com/780x450.png?text=Your+App+or+Dashboard"
alt="Dashboard Preview"
className="w-full h-full object-cover"
/>*/}
</MacLaptopScreen>
</div>
);
}
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.