# Browser Window

> Browser window mockup for React and shadcn/ui in Chrome, Safari, or generic styles, with address bar, sidebar, and themes.

Source: https://www.cult-ui.com/docs/components/mock-browser-window

## Example

```tsx title="mock-browser-window-demo.tsx"
"use client"

import { useState } from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { BrowserWindow } from "@/components/ui/mock-browser-window"

export default function DemoPage() {
  const [config, setConfig] = useState({
    variant: "chrome" as "chrome" | "safari",
    headerStyle: "full" as "minimal" | "full",
    size: "lg" as "sm" | "md" | "lg" | "xl",
    showSidebar: true,
    sidebarPosition: "left" as "left" | "right" | "top" | "bottom",
    url: "https://example.com/dashboard",
  })

  const [sidebarItems] = useState([
    { label: "Overview", active: true },
    { label: "Users", badge: "12" },
    { label: "Analytics", badge: "new" },
    { label: "Settings" },
  ])

  return (
    <div className="min-h-screen">
      <main className="container">
        <div className="mx-auto max-w-7xl">
          <div className="space-y-12">
            <div className="space-y-8">
              <div>
                <h2 className="mb-6 text-lg font-semibold">Preview</h2>
                <div className="bg-muted/30 flex justify-center rounded-xl border p-8">
                  <BrowserWindow
                    variant={config.variant}
                    headerStyle={config.headerStyle}
                    size={config.size}
                    showSidebar={config.showSidebar}
                    sidebarPosition={config.sidebarPosition}
                    url={config.url}
                    sidebarItems={config.showSidebar ? sidebarItems : undefined}
                    className="w-full max-w-4xl"
                  />
                </div>
              </div>
            </div>

            <div className="space-y-8">
              <h2 className="text-lg font-semibold">Window Settings</h2>
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                <div className="space-y-2">
                  <Label className="text-sm">Browser</Label>
                  <Select
                    value={config.variant}
                    onValueChange={(value: "chrome" | "safari") =>
                      setConfig((prev) => ({ ...prev, variant: value }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="chrome">Chrome</SelectItem>
                      <SelectItem value="safari">Safari</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label className="text-sm">Header Style</Label>
                  <Select
                    value={config.headerStyle}
                    onValueChange={(value: "minimal" | "full") =>
                      setConfig((prev) => ({ ...prev, headerStyle: value }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="minimal">Minimal</SelectItem>
                      <SelectItem value="full">Address Bar</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2">
                  <Label className="text-sm">Size</Label>
                  <Select
                    value={config.size}
                    onValueChange={(value: "sm" | "md" | "lg" | "xl") =>
                      setConfig((prev) => ({ ...prev, size: value }))
                    }
                  >
                    <SelectTrigger>
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="sm">Small</SelectItem>
                      <SelectItem value="md">Medium</SelectItem>
                      <SelectItem value="lg">Large</SelectItem>
                      <SelectItem value="xl">Extra Large</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

                <div className="space-y-2 md:col-span-2 lg:col-span-1">
                  <Label className="text-sm">URL</Label>
                  <Input
                    value={config.url}
                    onChange={(e) =>
                      setConfig((prev) => ({
                        ...prev,
                        url: e.target.value,
                      }))
                    }
                    placeholder="https://example.com"
                  />
                </div>

                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="text-sm">Show Sidebar</Label>
                    <Switch
                      checked={config.showSidebar}
                      onCheckedChange={(checked) =>
                        setConfig((prev) => ({
                          ...prev,
                          showSidebar: checked,
                        }))
                      }
                    />
                  </div>
                </div>

                {config.showSidebar && (
                  <div className="space-y-2">
                    <Label className="text-sm">Sidebar Position</Label>
                    <Select
                      value={config.sidebarPosition}
                      onValueChange={(
                        value: "left" | "right" | "top" | "bottom"
                      ) =>
                        setConfig((prev) => ({
                          ...prev,
                          sidebarPosition: value,
                        }))
                      }
                    >
                      <SelectTrigger>
                        <SelectValue />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="left">Left</SelectItem>
                        <SelectItem value="right">Right</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                )}

                <div className="space-y-2 md:col-span-2 lg:col-span-1">
                  <Label className="text-sm">Quick Presets</Label>
                  <div className="flex gap-2">
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex-1 bg-transparent"
                      onClick={() =>
                        setConfig((prev) => ({
                          ...prev,
                          variant: "chrome",
                          headerStyle: "full",
                          showSidebar: true,
                          size: "lg",
                        }))
                      }
                    >
                      Chrome Dashboard
                    </Button>
                    <Button
                      variant="outline"
                      size="sm"
                      className="flex-1 bg-transparent"
                      onClick={() =>
                        setConfig((prev) => ({
                          ...prev,
                          variant: "safari",
                          headerStyle: "minimal",
                          showSidebar: false,
                          size: "md",
                        }))
                      }
                    >
                      Safari Minimal
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  )
}
```

BrowserWindow is a React browser mockup component for shadcn/ui. Use it to present app screenshots, live demos, or product previews on landing pages and docs.

## Installation

### CLI

```bash
npx shadcn@latest add @cult-ui/mock-browser-window
```

### Manual

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

```tsx title="mock-browser-window.tsx"
import type React from "react"

import { cn } from "@/lib/utils"

interface SidebarItem {
  icon?: React.ReactNode
  label: string
  active?: boolean
  badge?: string | number
}

interface WindowControlsProps {
  variant?: "macos" | "windows" | "chrome" | "safari"
  headerStyle?: "minimal" | "full"
}

interface AddressBarProps {
  url?: string
  secure?: boolean
  variant?: "chrome" | "safari"
  className?: string
}

interface SidebarContentProps {
  items?: SidebarItem[]
  variant?: "navigation" | "bookmarks" | "history" | "extensions"
  className?: string
}

interface BrowserWindowProps {
  children?: React.ReactNode
  className?: string
  size?: "sm" | "md" | "lg" | "xl"
  showSidebar?: boolean
  sidebarPosition?: "left" | "right" | "top" | "bottom"
  headerStyle?: "minimal" | "full"
  variant?: "chrome" | "safari" | "generic"
  theme?: "light" | "dark" | "auto"
  url?: string
  sidebarItems?: Array<{
    icon?: React.ReactNode
    label: string
    active?: boolean
    badge?: string | number
  }>
}

function WindowControls({
  variant = "macos",
  headerStyle = "full",
}: WindowControlsProps) {
  const sizeClasses = "size-2"

  if (variant === "macos" || variant === "safari") {
    const dotColors =
      headerStyle === "minimal"
        ? {
            red: "bg-muted border  border-foreground/20",
            yellow: "bg-muted border border-foreground/20",
            green: "bg-muted border border-foreground/20",
          }
        : {
            red: "bg-red-500 hover:bg-red-600 border border-foreground/20",
            yellow:
              "bg-yellow-500 hover:bg-yellow-600 border border-foreground/20",
            green:
              "bg-green-500 hover:bg-green-600 border border-foreground/20 ",
          }

    return (
      <div className="flex gap-2">
        <div
          className={cn(
            sizeClasses,
            "rounded-full",
            dotColors.red,
            "group flex cursor-pointer items-center justify-center transition-colors"
          )}
        >
          {headerStyle !== "minimal" && (
            <div className="h-0.5 w-1.5 bg-red-900/60 opacity-0 transition-opacity group-hover:opacity-100"></div>
          )}
        </div>
        <div
          className={cn(
            sizeClasses,
            "rounded-full",
            dotColors.yellow,
            "group flex cursor-pointer items-center justify-center transition-colors"
          )}
        >
          {headerStyle !== "minimal" && (
            <div className="h-0.5 w-1.5 bg-yellow-900/60 opacity-0 transition-opacity group-hover:opacity-100"></div>
          )}
        </div>
        <div
          className={cn(
            sizeClasses,
            "rounded-full",
            dotColors.green,
            "group flex cursor-pointer items-center justify-center transition-colors"
          )}
        >
          {headerStyle !== "minimal" && (
            <div className="h-1 w-1 border border-green-900/60 opacity-0 transition-opacity group-hover:opacity-100"></div>
          )}
        </div>
      </div>
    )
  }

  if (variant === "windows") {
    return (
      <div className="flex gap-1">
        <div className="bg-muted/50 hover:bg-muted flex h-4 w-6 cursor-pointer items-center justify-center transition-colors">
          <div className="bg-foreground/60 h-0.5 w-2"></div>
        </div>
        <div className="bg-muted/50 hover:bg-muted flex h-4 w-6 cursor-pointer items-center justify-center transition-colors">
          <div className="border-foreground/60 h-2 w-2 border"></div>
        </div>
        <div className="flex h-4 w-6 cursor-pointer items-center justify-center bg-red-500/80 transition-colors hover:bg-red-500">
          <div className="h-0.5 w-2 rotate-45 bg-white"></div>
          <div className="absolute h-0.5 w-2 -rotate-45 bg-white"></div>
        </div>
      </div>
    )
  }

  if (variant === "chrome") {
    return (
      <div className="flex gap-1.5">
        <div
          className={cn(
            sizeClasses,
            "cursor-pointer rounded-full bg-red-500 transition-colors hover:bg-red-600"
          )}
        ></div>
        <div
          className={cn(
            sizeClasses,
            "cursor-pointer rounded-full bg-yellow-500 transition-colors hover:bg-yellow-600"
          )}
        ></div>
        <div
          className={cn(
            sizeClasses,
            "cursor-pointer rounded-full bg-green-500 transition-colors hover:bg-green-600"
          )}
        ></div>
      </div>
    )
  }

  return (
    <div className="flex gap-1.5">
      <div
        className={`${sizeClasses} border-foreground/20 bg-foreground/10 rounded-full border`}
      ></div>
      <div
        className={`${sizeClasses} border-foreground/20 bg-foreground/10 rounded-full border`}
      ></div>
      <div
        className={`${sizeClasses} border-foreground/20 bg-foreground/10 rounded-full border`}
      ></div>
    </div>
  )
}

function AddressBar({
  url = "https://example.com",
  secure = true,
  variant = "chrome",
  className = "",
}: AddressBarProps) {
  const variantStyles = {
    chrome:
      "bg-muted/30 rounded-full border border-foreground/5 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)_inset] backdrop-blur-sm",
    safari:
      "bg-muted/20 rounded-lg border border-foreground/5 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.03)_inset] backdrop-blur-sm",
  }

  const iconColors = {
    chrome: "text-muted-foreground/60",
    safari: "text-muted-foreground/60",
  }

  return (
    <div className={`flex flex-1 justify-center ${className}`}>
      <div
        className={`${variantStyles[variant]} text-muted-foreground/70 flex max-w-md min-w-[200px] items-center gap-2 px-4 py-2 text-xs transition-colors`}
      >
        {secure && (
          <div className={`h-3 w-3 ${iconColors[variant]}`}>
            <svg viewBox="0 0 12 12" fill="currentColor">
              <title>Secure</title>
              <path d="M6 1a2.5 2.5 0 0 1 2.5 2.5V5h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h.5V3.5A2.5 2.5 0 0 1 6 1z" />
            </svg>
          </div>
        )}
        <span className="truncate">{url}</span>
      </div>
    </div>
  )
}

function SidebarContent({
  items = [
    { label: "Dashboard", active: true },
    { label: "Analytics", badge: "3" },
    { label: "Settings" },
    { label: "Profile" },
  ],
  className = "",
}: SidebarContentProps) {
  return (
    <div className={`space-y-1 p-3 ${className}`}>
      {items.map((item, index) => (
        <div
          key={`${item.label}-${index}`}
          className={`flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 text-sm transition-colors ${
            item.active
              ? "bg-primary/5 text-primary border-primary/5 border"
              : "text-muted-foreground hover:text-foreground hover:bg-muted/20"
          } `}
        >
          {item.icon && (
            <div className="h-4 w-4 flex-shrink-0">{item.icon}</div>
          )}
          <span className="flex-1 truncate">{item.label}</span>
          {item.badge && (
            <div className="bg-primary/5 text-primary min-w-[16px] rounded-full px-1.5 py-0.5 text-center text-xs">
              {item.badge}
            </div>
          )}
        </div>
      ))}
    </div>
  )
}

export function BrowserWindow({
  children,
  className = "",
  size = "md",
  showSidebar = false,
  sidebarPosition = "left",
  headerStyle = "minimal",
  variant = "generic",
  theme = "auto",
  url,
  sidebarItems,
}: BrowserWindowProps) {
  const sizeClasses = {
    sm: "h-64 max-w-sm",
    md: "h-80 max-w-2xl",
    lg: "h-96 max-w-4xl",
    xl: "h-[32rem] max-w-6xl",
  }

  const sidebarSizes = {
    sm: "w-32",
    md: "w-48",
    lg: "w-56",
    xl: "w-64",
  }

  const themeClasses =
    theme === "dark"
      ? "bg-background border-border"
      : theme === "light"
        ? "bg-background border-border"
        : "bg-background border-border"

  const getHeaderStyles = () => {
    const baseStyles =
      "h-11 border-b border-foreground/5 flex items-center px-4"

    if (variant === "chrome") {
      return `${baseStyles} bg-muted/10 overflow-hidden`
    }

    if (variant === "safari") {
      return `${baseStyles} bg-muted/10 overflow-hidden border-b border-border/30`
    }

    return `${baseStyles} bg-muted/20`
  }

  return (
    <div
      className={`relative rounded-2xl border mask-b-from-50% shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.05),_0px_1px_1px_0px_rgba(255,_252,_240,_0.5)_inset,_0px_0px_0px_1px_hsla(0,_0%,_100%,_0.1)_inset,_0px_0px_1px_0px_rgba(28,_27,_26,_0.5)] dark:shadow-[0px_1px_1px_0px_rgba(0,_0,_0,_0.2),_0px_1px_1px_0px_rgba(0,_0,_0,_0.3)_inset,_0px_0px_0px_1px_hsla(0,_0%,_0%,_0.2)_inset,_0px_0px_1px_0px_rgba(255,_255,_255,_0.1)] ${sizeClasses[size]} ${themeClasses} ${className} flex flex-col`}
    >
      <div className={getHeaderStyles()}>
        <WindowControls
          variant={variant === "generic" ? "macos" : variant}
          headerStyle={headerStyle}
        />

        {headerStyle === "full" && (
          <AddressBar
            url={url}
            variant={variant === "generic" ? "chrome" : variant}
            className="ml-4"
          />
        )}
      </div>

      {showSidebar && sidebarPosition === "top" && (
        <div className="border-foreground/5 bg-muted/20 h-16 border-b">
          <SidebarContent
            items={sidebarItems}
            variant="navigation"
            className="flex-row"
          />
        </div>
      )}

      <div className="flex h-0 flex-1">
        {/* Left Sidebar */}
        {showSidebar && sidebarPosition === "left" && (
          <div
            className={`border-foreground/5 bg-muted/20 border-r ${sidebarSizes[size]} h-full flex-shrink-0`}
          >
            <SidebarContent items={sidebarItems} />
          </div>
        )}

        {/* Main Content Area */}
        <div className="relative h-full min-w-0 flex-1">
          {children || <div className="absolute inset-0">{children}</div>}
        </div>

        {/* Right Sidebar */}
        {showSidebar && sidebarPosition === "right" && (
          <div
            className={`border-foreground/5 bg-muted/20 border-l ${sidebarSizes[size]} h-full flex-shrink-0`}
          >
            <SidebarContent items={sidebarItems} />
          </div>
        )}
      </div>

      {/* Bottom Sidebar */}
      {showSidebar && sidebarPosition === "bottom" && (
        <div className="border-foreground/5 bg-muted/20 h-16 border-t">
          <SidebarContent
            items={sidebarItems}
            variant="navigation"
            className="flex-row"
          />
        </div>
      )}
    </div>
  )
}
```

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

## Usage

```tsx
import { BrowserWindow } from "@/components/ui/mock-browser-window";
```

### Basic Usage

```tsx
<BrowserWindow>
  <div className="p-8">Your content here</div>
</BrowserWindow>
```

### Browser Variants

Display different browser styles:

```tsx
// Chrome-style window
<BrowserWindow variant="chrome" url="https://example.com" />

// Safari-style window
<BrowserWindow variant="safari" url="https://example.com" />

// Generic browser window
<BrowserWindow variant="generic" />
```

### Header Styles

Control the header appearance:

```tsx
// Minimal header (only window controls)
<BrowserWindow headerStyle="minimal" />

// Full header with address bar
<BrowserWindow headerStyle="full" url="https://example.com" />
```

### Sizes

Choose from different window sizes:

```tsx
<BrowserWindow size="sm" />    // Small
<BrowserWindow size="md" />    // Medium (default)
<BrowserWindow size="lg" />    // Large
<BrowserWindow size="xl" />    // Extra Large
```

### Sidebar

Add and position a sidebar:

```tsx
<BrowserWindow
  showSidebar={true}
  sidebarPosition="left"
  sidebarItems={[
    { label: "Dashboard", active: true },
    { label: "Users", badge: "12" },
    { label: "Analytics", badge: "new" },
    { label: "Settings" },
  ]}
/>
```

### Themes

Apply different themes:

```tsx
<BrowserWindow theme="light" />
<BrowserWindow theme="dark" />
<BrowserWindow theme="auto" /> // Follows system theme
```

### Custom Content

Add your own content inside the window:

```tsx
<BrowserWindow
  variant="chrome"
  headerStyle="full"
  url="https://app.example.com"
>
  <div className="p-8">
    <h1 className="text-2xl font-bold">Dashboard</h1>
    <p className="text-muted-foreground">Welcome to your dashboard</p>
  </div>
</BrowserWindow>
```

## API Reference

### BrowserWindow Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `React.ReactNode` | - | Custom content to display inside the window |
| `className` | `string` | - | Additional CSS classes |
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Window size |
| `showSidebar` | `boolean` | `false` | Whether to show the sidebar |
| `sidebarPosition` | `"left" \| "right" \| "top" \| "bottom"` | `"left"` | Position of the sidebar |
| `headerStyle` | `"minimal" \| "full"` | `"minimal"` | Header style: minimal or with address bar |
| `variant` | `"chrome" \| "safari" \| "generic"` | `"generic"` | Browser variant style |
| `theme` | `"light" \| "dark" \| "auto"` | `"auto"` | Color theme |
| `url` | `string` | - | URL to display in the address bar |
| `sidebarItems` | `SidebarItem[]` | - | Array of sidebar items |
| `texture` | `TextureType` | `"none"` | Texture overlay type |
| `textureOpacity` | `number` | `0.25` | Opacity of the texture overlay |

### SidebarItem Interface

| Property | Type               | Description                        |
| -------- | ------------------ | ---------------------------------- |
| `icon`   | `React.ReactNode`  | Optional icon for the sidebar item |
| `label`  | `string`           | Label text                         |
| `active` | `boolean`          | Whether the item is active         |
| `badge`  | `string \| number` | Optional badge display             |

## Features

- **Multiple Browser Variants**: Chrome, Safari, and generic styles
- **Customizable Header**: Minimal or full header with address bar
- **Flexible Sidebar**: Show/hide sidebar with configurable position (left, right, top, bottom)
- **Multiple Sizes**: Small, medium, large, and extra-large presets
- **Theme Support**: Light, dark, or auto theme
- **Sidebar Items**: Support for icons, labels, badges, and active states
- **Custom Content**: Add any React content inside the window
- **Texture Overlays**: Optional texture overlays for visual effects

## Examples

### Chrome Dashboard

```tsx
<BrowserWindow
  variant="chrome"
  headerStyle="full"
  url="https://app.example.com/dashboard"
  showSidebar={true}
  sidebarPosition="left"
  sidebarItems={[
    { label: "Overview", active: true },
    { label: "Users", badge: "12" },
    { label: "Analytics", badge: "new" },
    { label: "Settings" },
  ]}
>
  <div className="p-8">
    <h1 className="text-2xl font-bold mb-4">Dashboard</h1>
    <div className="grid grid-cols-3 gap-4">
      <div className="p-4 bg-muted rounded-lg">Card 1</div>
      <div className="p-4 bg-muted rounded-lg">Card 2</div>
      <div className="p-4 bg-muted rounded-lg">Card 3</div>
    </div>
  </div>
</BrowserWindow>
```

### Safari Minimal

```tsx
<BrowserWindow
  variant="safari"
  headerStyle="minimal"
  size="md"
  showSidebar={false}
>
  <div className="p-8 text-center">
    <h2 className="text-xl font-semibold">Clean Design</h2>
    <p className="text-muted-foreground mt-2">Minimal browser window</p>
  </div>
</BrowserWindow>
```

### Sidebar Positions

```tsx
// Left sidebar (default)
<BrowserWindow
  showSidebar={true}
  sidebarPosition="left"
  sidebarItems={[
    { label: "Home", active: true },
    { label: "About" },
    { label: "Contact" },
  ]}
/>

// Right sidebar
<BrowserWindow
  showSidebar={true}
  sidebarPosition="right"
  sidebarItems={[
    { label: "Settings" },
    { label: "Profile" },
  ]}
/>

// Top sidebar
<BrowserWindow
  showSidebar={true}
  sidebarPosition="top"
  sidebarItems={[
    { label: "Overview" },
    { label: "Analytics" },
    { label: "Reports" },
  ]}
/>

// Bottom sidebar
<BrowserWindow
  showSidebar={true}
  sidebarPosition="bottom"
  sidebarItems={[
    { label: "Navigation" },
    { label: "Links" },
  ]}
/>
```

### With Icons and Badges

```tsx
import { Bell, Home, Settings, Users } from "lucide-react";

<BrowserWindow
  variant="chrome"
  headerStyle="full"
  url="https://app.example.com"
  showSidebar={true}
  sidebarItems={[
    { icon: <Home className="w-4 h-4" />, label: "Home", active: true },
    { icon: <Users className="w-4 h-4" />, label: "Users", badge: "12" },
    { icon: <Bell className="w-4 h-4" />, label: "Notifications", badge: "3" },
    { icon: <Settings className="w-4 h-4" />, label: "Settings" },
  ]}
/>;
```

### Different Sizes

```tsx
// Small window
<BrowserWindow size="sm" url="https://example.com" />

// Medium window (default)
<BrowserWindow size="md" url="https://example.com" />

// Large window
<BrowserWindow size="lg" url="https://example.com" />

// Extra large window
<BrowserWindow size="xl" url="https://example.com" />
```

### Dark Theme

```tsx
<BrowserWindow
  variant="chrome"
  theme="dark"
  headerStyle="full"
  url="https://app.example.com"
>
  <div className="p-8">
    <h1 className="text-2xl font-bold text-white">Dark Mode</h1>
  </div>
</BrowserWindow>
```

### With Custom Content

```tsx
<BrowserWindow
  variant="safari"
  headerStyle="full"
  url="https://portfolio.example.com"
  size="lg"
>
  <div className="h-full flex items-center justify-center">
    <div className="text-center space-y-4">
      <h1 className="text-4xl font-bold">Welcome</h1>
      <p className="text-muted-foreground text-lg">
        Beautiful browser mockup for your designs
      </p>
    </div>
  </div>
</BrowserWindow>
```

### Code Preview

```tsx
<BrowserWindow
  variant="chrome"
  headerStyle="full"
  url="https://code.example.com"
  size="lg"
>
  <div className="p-6 bg-[#1e1e1e] h-full overflow-auto">
    <pre className="text-sm text-white">
      <code>{`function hello() {
  console.log('Hello, world!')
}`}</code>
    </pre>
  </div>
</BrowserWindow>
```