# Google Chrome (macOS, w/ video)

> macOS Google Chrome 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/google-chrome-with-video).

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

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/google-chrome-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/google-chrome.json`

## Files

### `registry/new-york/blocks/google-chrome-with-video/page.tsx`

```tsx
import GoogleChromeWithVideo from "./components/google-chrome-with-video"

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

### `registry/new-york/blocks/google-chrome-with-video/components/google-chrome-with-video.tsx`

```tsx
import { GoogleChromeWithVideoRoot } from "./google-chrome-with-video-root"
import { createBlockVideo } from "@/lib/block-media"

const blockVideo = createBlockVideo("google-chrome-with-video")
export default function GoogleChromeWithVideo() {
  return <GoogleChromeWithVideoRoot screenSrc={blockVideo("video.mp4")} />
}
```

### `registry/new-york/blocks/google-chrome-with-video/components/google-chrome-with-video-root.tsx`

```tsx
"use client"

import { useCallback } from "react"

import GoogleChrome from "../../google-chrome/components/google-chrome"
import GoogleHomePreview from "../../google-chrome/components/google-home-preview"
import PageLoadingBar from "../../google-chrome/components/page-loading-bar"
import { useSimulatedPageLoad } from "../../google-chrome/hooks/use-simulated-page-load"


export function GoogleChromeWithVideoRoot({ screenSrc }: { screenSrc: string }) {
  const { phase, progress, startLoading } = useSimulatedPageLoad()

  const handleTypedComplete = useCallback(() => {
    startLoading()
  }, [startLoading])

  return (
    <GoogleChrome
      omniboxTypingLoop={false}
      onOmniboxTypedComplete={handleTypedComplete}
      aspectRatio="16/9"
      minHeight={0}
      className="max-w-4xl"
    >
      <div className="relative size-full">
        <PageLoadingBar progress={progress} visible={phase === "loading"} />
        {phase === "loaded" ? (
          <video
            className="absolute inset-0 block size-full border-none object-cover object-center"
            src={screenSrc}
            muted
            loop
            playsInline
            autoPlay
            aria-label="Screen content video demo"
          />
        ) : (
          <GoogleHomePreview className="absolute inset-0" />
        )}
      </div>
    </GoogleChrome>
  )
}
```

### `public/videos/blocks/google-chrome-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.
```