Media & Mockups
Mac Screen
Classic Macintosh computer mockup for React and shadcn/ui that places an image or GIF inside the CRT screen responsively.
Updated
Mac Screen is a responsive React device mockup component for shadcn/ui. Use it to show product demos, retro screenshots, or animated previews on landing pages and portfolios.
Installation
pnpm dlx shadcn@latest add @cult-ui/mac-screen
Usage
MacScreen is a client component. Pass gifUrl for any image URL (not only GIFs) to show inside the bezel, and alt for accessible text for that inner image.
import { MacScreen } from "@/components/mac-screen";
export function Hero() {
return (
<MacScreen
gifUrl="https://example.com/preview.png"
alt="Product screenshot"
/>
);
}