# Mac Screen

> Classic Macintosh computer mockup for React and shadcn/ui that places an image or GIF inside the CRT screen responsively.

Source: https://www.cult-ui.com/docs/components/mac-screen

## Example

```tsx title="mac-screen-demo.tsx"
"use client"

import { MacScreen } from "@/components/ui/mac-screen"

export default function MacScreenDemo() {
  return (
    <div className="flex items-center justify-center">
      <MacScreen />
    </div>
  )
}
```

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

### CLI

```bash
npx shadcn@latest add @cult-ui/mac-screen
```

### Manual

**Copy and paste the following code into your project.**

```tsx title="mac-screen.tsx"
"use client"

interface MacScreenProps {
  gifUrl?: string
  alt?: string
}

export function MacScreen({
  gifUrl = "https://media.giphy.com/media/sIIhZliB2McAo/giphy.gif",
  alt = "Screen content",
}: MacScreenProps) {
  return (
    <div className="relative inline-block">
      {/* Mac Computer Image */}
      <img
        alt="Classic Macintosh Computer"
        className="w-full max-w-lg"
        src="/component-frames/apple-computer-img.png"
      />

      {/* GIF overlay — all % so it tracks the responsive frame image (fixed rem width broke in previews) */}
      <div
        className="absolute overflow-hidden"
        style={{
          top: "22.27%",
          left: "35.6%",
          width: "28.79%",
          height: "37.89%",
          borderRadius: "2.5%",
        }}
      >
        <img alt={alt} className="h-full w-full object-cover" src={gifUrl} />
      </div>
    </div>
  )
}
```

**Update the import paths to match your project setup.**

**Add the frame asset to your app’s public folder at
  `public/component-frames/apple-computer-img.png` (or change the `src` in the
  component to match your file).**

## 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.

```tsx
import { MacScreen } from "@/components/mac-screen";

export function Hero() {
  return (
    <MacScreen
      gifUrl="https://example.com/preview.png"
      alt="Product screenshot"
    />
  );
}
```