Mac Screen

Installation

Pro workflow

ProOpen in

Propnpx add

Open in v0 and the Pro CLI install shortcut are part of Cult UI Pro. Upgrade to use them in your projects.

Get Pro

Copy and paste the following code into your project.

Source code is available for Pro members.

Upgrade to copy and use these components in your projects.

View pricing

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.


import { MacScreen } from "@/components/mac-screen";
 
export function Hero() {
  return (
    <MacScreen
      gifUrl="https://example.com/preview.png"
      alt="Product screenshot"
    />
  );
}

Installation

Copy and paste the following code into your project.

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

Installation

Copy and paste the following code into your project.

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

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

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