# Google Chrome (Windows, w/ image)

> Windows Google Chrome mock with bundled screen image under the omnibox; swap /images/blocks/... or pass children on the base component.

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-windows-with-image).

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

## Install

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

## Files

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

```tsx
import GoogleChromeWindowsWithImage from "./components/google-chrome-windows-with-image"

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

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

```tsx
import { GoogleChromeWindowsWithImageRoot } from "./google-chrome-windows-with-image-root"
import { createBlockImage } from "@/lib/block-media"

const blockImage = createBlockImage("google-chrome-windows-with-image")
export default function GoogleChromeWindowsWithImage() {
  return (
    <GoogleChromeWindowsWithImageRoot screenSrc={blockImage("image.png")} />
  )
}
```

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

```tsx
"use client"

import Image from "next/image"
import { useCallback } from "react"

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


const OMNIBOX_PROMPTS = ["vercel.com/home"] as const

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

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

  return (
    <GoogleChromeWindows
      omniboxTypingPrompts={OMNIBOX_PROMPTS}
      omniboxTypingLoop={false}
      onOmniboxTypedComplete={handleTypedComplete}
      aspectRatio="1075/719"
      minHeight={0}
      className="max-w-4xl"
    >
      <div className="relative size-full">
        <PageLoadingBar progress={progress} visible={phase === "loading"} />
        {phase === "loaded" ? (
          <div className="relative size-full">
            <Image
              src={screenSrc}
              alt="Browser screen content"
              unoptimized
              fill
              className="object-cover object-top"
              sizes="(max-width: 1152px) 100vw, 1152px"
              loading="eager"
            />
          </div>
        ) : (
          <GoogleHomePreview className="absolute inset-0" />
        )}
      </div>
    </GoogleChromeWindows>
  )
}
```

### `public/images/blocks/google-chrome-windows-with-image/image.png.gitkeep`

```gitkeep
Place your asset here. Same base name, any supported format: jpg, jpeg, png, webp, avif, gif, or svg. Remove the .gitkeep extension from the filename.
```