BrowserWindow

A customizable browser window mockup component with support for Chrome, Safari, and generic styles, customizable sidebars, and themes

Preview

https://example.com/dashboard

Overview

Users

Analytics

new

Settings

Window Settings

Browser

Header Style

Size

URL

Show Sidebar

Sidebar Position

Quick Presets

"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 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="text-lg font-semibold mb-6">Preview</h2>
                <div className="flex justify-center p-8 bg-muted/30 rounded-xl border">
                  <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>
  )
}

Installation


pnpm dlx shadcn@latest add https://cult-ui.com/r/mock-browser-window.json

Usage


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

Basic Usage


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

Browser Variants

Display different browser styles:


// 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:


// 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:


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

Sidebar

Add and position a sidebar:


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

Themes

Apply different themes:


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

Custom Content

Add your own content inside the window:


<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


<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


<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


// 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


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


// 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


<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


<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


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

MinimalCard MorphSurface

AI SDK Agents

Real world vercel AI SDK v.6 Patterns you can copy and paste.

Complex AI Agents

AI Workflow Patterns

80+ Tools, Artifacts, Chat Patterns and much more