# MacBook Pro (w/ video)

> Example MacBook Pro mockup with a bundled screen video; shows the children slot and /videos/blocks/... swap pattern.

A shadcn/ui block from the [@uiception](https://uiception.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/macbook-pro-with-video).

- Page, with a live preview: https://shadcn.exchange/r/uiception/macbook-pro-with-video
- Screenshot: https://shadcn.exchange/shot/uiception/macbook-pro-with-video/light.png
- Registry item: https://uiception.com/r/macbook-pro-with-video.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/macbook-pro-with-video.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://uiception.com/r/block-media.json`, `https://uiception.com/r/macbook-pro.json`

## Files

### `registry/new-york/blocks/macbook-pro-with-video/page.tsx`

```tsx
import MacbookProWithVideo from "./components/macbook-pro-with-video"

export default function Page() {
  return (
    <div className="px-4 py-4 md:px-6 md:py-6">
      <MacbookProWithVideo />
    </div>
  )
}
```

### `registry/new-york/blocks/macbook-pro-with-video/components/macbook-pro-with-video.tsx`

```tsx
import MacbookPro from "../../macbook-pro/components/macbook-pro"
import { createBlockVideo } from "@/lib/block-media"

const blockVideo = createBlockVideo("macbook-pro-with-video")

const SCREEN_VIDEO = blockVideo("video.mp4")

export default function MacbookProWithVideo() {
  return (
    <MacbookPro>
      <video
        className="absolute inset-0 block size-full border-none object-cover object-center"
        src={SCREEN_VIDEO}
        muted
        loop
        playsInline
        autoPlay
        aria-label="Screen content video demo"
      />
    </MacbookPro>
  )
}
```

### `public/videos/blocks/macbook-pro-with-video/video.mp4.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: mp4, webm, mov, or m4v. Remove the .gitkeep extension from the filename.
```