[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" 'use client' import { Desktop } from '@/components/desktop' export default function Home() { return } [V0_FILE]typescriptreact:file="components/desktop-icon.tsx" isMerged="true" 'use client' import { type LucideIcon } from 'lucide-react' interface DesktopIconProps { label: string icon: LucideIcon onClick: () => void } export function DesktopIcon({ label, icon: Icon, onClick }: DesktopIconProps) { return ( ) } [V0_FILE]typescriptreact:file="components/window.tsx" isMerged="true" 'use client' import { useState, useRef, useEffect } from 'react' import { X, Minus, Maximize2 } from 'lucide-react' interface WindowProps { id: string title: string children: React.ReactNode x: number y: number width: number height: number zIndex: number onClose: () => void onMinimize: () => void onMaximize: () => void onFocus: () => void onPositionChange: (x: number, y: number) => void onSizeChange: (width: number, height: number) => void } export function Window({ title, children, x, y, width, height, zIndex, onClose, onMinimize, onMaximize, onFocus, onPositionChange, onSizeChange, }: WindowProps) { const [isDragging, setIsDragging] = useState(false) const [isResizing, setIsResizing] = useState(false) const [dragStart, setDragStart] = useState({ x: 0, y: 0 }) const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 }) const windowRef = useRef(null) useEffect(() => { const handleMouseMove = (e: MouseEvent) => { if (isDragging) { const newX = e.clientX - dragStart.x const newY = e.clientY - dragStart.y onPositionChange(newX, newY) } else if (isResizing) { const deltaX = e.clientX - resizeStart.x const deltaY = e.clientY - resizeStart.y const newWidth = Math.max(400, resizeStart.width + deltaX) const newHeight = Math.max(300, resizeStart.height + deltaY) onSizeChange(newWidth, newHeight) } } const handleMouseUp = () => { setIsDragging(false) setIsResizing(false) } if (isDragging || isResizing) { document.addEventListener('mousemove', handleMouseMove) document.addEventListener('mouseup', handleMouseUp) return () => { document.removeEventListener('mousemove', handleMouseMove) document.removeEventListener('mouseup', handleMouseUp) } } }, [isDragging, isResizing, dragStart, resizeStart, onPositionChange, onSizeChange]) const handleMouseDownTitle = (e: React.MouseEvent) => { if ((e.target as HTMLElement).closest('button')) return setIsDragging(true) setDragStart({ x: e.clientX - x, y: e.clientY - y, }) onFocus() } const handleMouseDownResize = (e: React.MouseEvent) => { e.stopPropagation() setIsResizing(true) setResizeStart({ x: e.clientX, y: e.clientY, width, height, }) } return (

{/* Title Bar */}

{title}

{/* Window Content */}

{children}

{/* Resize Handle */}

) } [V0_FILE]typescriptreact:file="components/windows/documentation-window.tsx" isMerged="true" 'use client' import { Search, Wrench, Box, FileCode, Code, Star, Sparkles, Zap } from 'lucide-react' export function DocumentationWindow() { return (

{/* Header with Isometric Illustration */}

Documentation

{/* Search Bar */}

{/* Content */}

{/* Integration Section */}

{[ { icon: Wrench, label: 'Install and configure' }, { icon: Box, label: 'SDKs' }, { icon: FileCode, label: 'Frameworks' }, { icon: Code, label: 'API' }, { icon: Star, label: 'Advanced' }, ].map((item, i) => ( ))}

{/* AI Platform Section */}

{[ { icon: Sparkles, label: 'OpenHog AI', color: 'bg-gray-100' }, { icon: Box, label: 'MCP', color: 'bg-blue-100' }, { icon: Zap, label: 'AI wizard', color: 'bg-purple-100' }, { icon: Code, label: 'AI engineering', color: 'bg-orange-100' }, ].map((item, i) => ( ))}

{/* Sidebar Info */}

About our docs

There are a few ways to explore our docs:

On our website (You are here)

Ask OpenHog AI, our trusty AI chatbot. Start a chat on any docs page and OpenHog AI will have the relevant context.

Search with the 🔍 icon at the top right.

In the product

Look for tooltips that link to docs - they open right inside the product.

Ask OpenHog AI in the product.

) } [V0_FILE]typescriptreact:file="components/windows/pricing-window.tsx" isMerged="true" 'use client' import { Check } from 'lucide-react' export function PricingWindow() { return (

{/* Left Side - Pricing Card */}

{['Session Replay', 'Web Analytics', 'Product Analytics'].map((product, i) => (

{product}

))}

*OpenHog {"doesn't"} really come on a physical CD. (If you {"don't"} know what a CD is, please ask your parents.)

{/* Right Side - Pricing Details */}

OpenHog Cloud

OpenHog is designed to grow with you. Our 10+ products (and counting) will take you from idea to product-market fit to IPO and beyond. 🚀

Our generous free tier means more than 90% of companies use OpenHog for free. Only add a card if you need more than the free tier limits, advanced features, or want more projects. You still keep the same monthly free volume, even after upgrading.

Free

No credit card required

Free

Free - no credit card required

Pay-as-you-go

Usage-based pricing

Generous monthly free tier

Community support

1 project, 1-year data retention

Unlimited team members

Cloud region

) } [V0_FILE]typescriptreact:file="components/windows/roadmap-window.tsx" isMerged="true" 'use client' export function RoadmapWindow() { const roadmapItems = [ { votes: 603, team: 'Not assigned', idea: 'Product tours', details: 'We have a in-app surveys product that allows our customers to show a survey...' }, { votes: 288, team: 'Blitzscale', idea: 'Embedded analytics (B2B2B/B2B2C)', details: 'Ability to show OpenHog data/graphs to end users' }, { votes: 161, team: 'Web Analytics', idea: 'Cookie banner product', details: 'We want some "just use this" way of displaying cookie banners that would le...' }, { votes: 146, team: 'Surveys', idea: 'Surveys in emails', details: 'Add ability to send surveys in emails and collect responses via interactions in the email' }, { votes: 135, team: 'Not assigned', idea: 'Logs product', details: 'Basics: - Log Collection: Capture logs from web apps or other digital t...' }, { votes: 112, team: 'Not assigned', idea: 'Product roadmaps', details: 'Very much a rough idea... We have a really wide variety of features we cou...' }, { votes: 97, team: 'Feature Flags', idea: 'Event-based flag targeting', details: 'Being able to release feature flags based on events triggered, as being part of a...' }, ] return (

{/* Toolbar */}

{/* Navigation */}

{['About', 'Roadmap', 'Changelog', 'People', 'Teams', 'Handbook', 'Blog', 'Media', 'Careers'].map((item) => ( ))}

{/* Content */}

Roadmap

{"Here's"} what {"we're"} thinking about building next. If you want to see what {"we've"} shipped recently,{' '} visit the changelog.

{/* Roadmap Table */}

{roadmapItems.map((item, i) => ( ))}

Votes	Team	Idea	Details
{item.votes} votes	{item.team === 'Not assigned' ? ( {item.team} ) : ( {item.team} )}	{item.idea}	{item.details} {item.details.endsWith('...') && ( )}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next' import { Analytics } from '@vercel/analytics/next' import './globals.css' import { Geist, Geist_Mono, Geist as V0_Font_Geist, Geist_Mono as V0_Font_Geist_Mono, Source_Serif_4 as V0_Font_Source_Serif_4 } from 'next/font/google' // Initialize fonts const _geist = V0_Font_Geist({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) const _geistMono = V0_Font_Geist_Mono({ subsets: ['latin'], weight: ["100","200","300","400","500","600","700","800","900"] }) const _sourceSerif_4 = V0_Font_Source_Serif_4({ subsets: ['latin'], weight: ["200","300","400","500","600","700","800","900"] }) export const metadata: Metadata = { title: 'OpenHog - OS-Themed Dev Tools', description: 'An OS-themed website template featuring draggable windows and desktop interface', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/windows/home-window.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' export function HomeWindow() { return (

{/* Editor Toolbar */}

{/* Content */}

OpenHog

You like PostHog's OS-theme? Use this template to create one for yourself. Whether it's a website for your product or a personal portfolio, an OS-themed app is really dope to see.

Questions? Watch a demo or talk to a human

Explore apps by company stage

Browse app library (34)

▶

Session Replay

Watch people use your product

Web Analytics

Product Analytics

Error Tracking

Experiments

{"Who's using OpenHog?"}

Trusted by thousands of product teams worldwide

) } [V0_FILE]typescriptreact:file="components/windows/update-window.tsx" isMerged="true" 'use client' import { useState, useEffect } from 'react' import { RefreshCw, Check, Download, Settings, Zap } from 'lucide-react' export function UpdateWindow() { const [stage, setStage] = useState<'checking' | 'downloading' | 'installing' | 'complete'>('checking') const [progress, setProgress] = useState(0) const [currentFile, setCurrentFile] = useState('') const files = [ 'system.core.dll', 'ui.framework.pkg', 'security.patch.exe', 'network.drivers.sys', 'graphics.renderer.bin', 'audio.codec.dll', 'kernel.update.img', 'bootloader.cfg', ] useEffect(() => { let interval: NodeJS.Timeout if (stage === 'checking') { // Checking for updates phase interval = setInterval(() => { setProgress(prev => { if (prev >= 100) { setStage('downloading') return 0 } return prev + 2 }) }, 50) } else if (stage === 'downloading') { // Downloading phase with file names interval = setInterval(() => { setProgress(prev => { if (prev >= 100) { setStage('installing') return 0 } const newProgress = prev + 1 if (newProgress % 12 === 0) { const fileIndex = Math.floor((newProgress / 100) * files.length) setCurrentFile(files[fileIndex] || files[files.length - 1]) } return newProgress }) }, 80) } else if (stage === 'installing') { // Installing phase interval = setInterval(() => { setProgress(prev => { if (prev >= 100) { setStage('complete') return 100 } const newProgress = prev + 0.8 if (Math.floor(newProgress) % 15 === 0) { const fileIndex = Math.floor((newProgress / 100) * files.length) setCurrentFile(files[fileIndex] || files[files.length - 1]) } return newProgress }) }, 100) } return () => { if (interval) clearInterval(interval) } }, [stage]) return (

{/* Logo/Icon Area */}

{stage === 'complete' ? (

) : (

)}

{/* Status Text */}

{stage === 'checking' && ( <>

Checking for updates

Scanning for available system updates...

)} {stage === 'downloading' && ( <>

Downloading updates

This may take a few minutes

)} {stage === 'installing' && ( <>

Installing updates

Don't turn off your computer

)} {stage === 'complete' && ( <>

Update complete!

Your system is up to date

)}

{/* Progress Bar */} {stage !== 'complete' && (

{Math.floor(progress)}% {currentFile && ( {stage === 'downloading' ? : } {currentFile} )}

)} {/* Stage Indicators */}

Checking

Downloading

Installing

Complete

{/* Fun Facts */} {stage !== 'complete' && (

{stage === 'checking' && "💡 Did you know? Regular updates keep your system secure and running smoothly!"} {stage === 'downloading' && "💡 Pro tip: Updates include performance improvements and new features!"} {stage === 'installing' && "💡 Fun fact: System updates can make your computer faster and more stable!"}

)} {/* Completion Message */} {stage === 'complete' && (

All updates have been successfully installed. Your system is now running the latest version.

)}

) } [V0_FILE]typescriptreact:file="components/desktop.tsx" isEdit="true" isQuickEdit="true" isMerged="true" 'use client' import { useState } from 'react' import { DesktopIcon } from './desktop-icon' import { Window } from './window' import { HomeWindow } from './windows/home-window' import { DocumentationWindow } from './windows/documentation-window' import { PricingWindow } from './windows/pricing-window' import { RoadmapWindow } from './windows/roadmap-window' import { UpdateWindow } from './windows/update-window' import { TerminalWindow } from './windows/terminal-window' import { FileText, Package, Calculator, Video, HelpCircle, LogIn, Lightbulb, Briefcase, Trash2, RefreshCw, Terminal } from 'lucide-react' interface OpenWindow { id: string title: string component: React.ReactNode x: number y: number width: number height: number zIndex: number isMinimized: boolean } export function Desktop() { const [openWindows, setOpenWindows] = useState([]) const [nextZIndex, setNextZIndex] = useState(10) const [backgroundColor, setBackgroundColor] = useState('#d4c4a8') const bgColorMap: Record = { beige: '#d4c4a8', blue: '#3b82f6', red: '#ef4444' } const handleBackgroundChange = (color: string) => { setBackgroundColor(bgColorMap[color] || '#d4c4a8') } const leftIcons = [ { id: 'home', label: 'home.mdx', icon: FileText, component: }, { id: 'product', label: 'Product OS', icon: Package, component:

Product OS Content

}, { id: 'pricing', label: 'Pricing', icon: Calculator, component: }, { id: 'demo', label: 'demo.mov', icon: Video, component:

Demo Video

}, { id: 'question', label: 'Ask a question', icon: HelpCircle, component:

Q&A Form

}, { id: 'signup', label: 'Sign up →', icon: LogIn, component:

}, ] const rightIcons = [ { id: 'why', label: 'Why OpenHog?', icon: Lightbulb, component:

Why OpenHog Content

}, { id: 'work', label: 'Work here', icon: Briefcase, component:

Careers Content

}, { id: 'terminal', label: 'Terminal', icon: Terminal, component: }, { id: 'update', label: 'Update OS', icon: RefreshCw, component: }, { id: 'trash', label: 'Trash', icon: Trash2, component:

Trash (Empty)

}, ] const openWindow = (id: string, title: string, component: React.ReactNode) => { const existingWindow = openWindows.find(w => w.id === id) if (existingWindow) { setOpenWindows(prev => prev.map(w => w.id === id ? { ...w, zIndex: nextZIndex, isMinimized: false } : w )) setNextZIndex(prev => prev + 1) return } const newWindow: OpenWindow = { id, title, component, x: 100 + openWindows.length * 30, y: 60 + openWindows.length * 30, width: 800, height: 600, zIndex: nextZIndex, isMinimized: false, } setOpenWindows(prev => [...prev, newWindow]) setNextZIndex(prev => prev + 1) } const closeWindow = (id: string) => { setOpenWindows(prev => prev.filter(w => w.id !== id)) } const minimizeWindow = (id: string) => { setOpenWindows(prev => prev.map(w => w.id === id ? { ...w, isMinimized: true } : w )) } const maximizeWindow = (id: string) => { setOpenWindows(prev => prev.map(w => w.id === id ? { ...w, x: 0, y: 32, width: window.innerWidth, height: window.innerHeight - 80, zIndex: nextZIndex } : w )) setNextZIndex(prev => prev + 1) } const bringToFront = (id: string) => { setOpenWindows(prev => prev.map(w => w.id === id ? { ...w, zIndex: nextZIndex } : w )) setNextZIndex(prev => prev + 1) } const updateWindowPosition = (id: string, x: number, y: number) => { setOpenWindows(prev => prev.map(w => w.id === id ? { ...w, x, y } : w )) } const updateWindowSize = (id: string, width: number, height: number) => { setOpenWindows(prev => prev.map(w => w.id === id ? { ...w, width, height } : w )) } return ( <> {/* Desktop Background */}

{/* Top Menu Bar */}

OpenHog

{/* Left Desktop Icons */}

{leftIcons.map((icon) => ( openWindow(icon.id, icon.label, icon.component)} /> ))}

{/* Right Desktop Icons */}

{rightIcons.map((icon) => ( openWindow(icon.id, icon.label, icon.component)} /> ))}

{/* Open Windows */} {openWindows.map((window) => ( !window.isMinimized && ( closeWindow(window.id)} onMinimize={() => minimizeWindow(window.id)} onMaximize={() => maximizeWindow(window.id)} onFocus={() => bringToFront(window.id)} onPositionChange={(x, y) => updateWindowPosition(window.id, x, y)} onSizeChange={(width, height) => updateWindowSize(window.id, width, height)} > {window.component} ) ))} {/* Taskbar */}

{openWindows.map((window) => ( ))}

) } [V0_FILE]typescriptreact:file="components/windows/terminal-window.tsx" isEdit="true" isQuickEdit="true" 'use client' import { useState, useRef, useEffect } from 'react' interface TerminalProps { onBackgroundChange: (color: string) => void } export function TerminalWindow({ onBackgroundChange }: TerminalProps) { const [history, setHistory] = useState<{ type: 'command' | 'output', content: string | React.ReactNode }[]>([ { type: 'output', content: 'OpenHog Terminal v1.0.0' }, { type: 'output', content: 'Type "open-hog fetch" or "open-hog change bg" to get started.' }, ]) const [currentInput, setCurrentInput] = useState('') const [bgColor, setBgColor] = useState('beige') const inputRef = useRef(null) const terminalRef = useRef(null) const colors = ['beige', 'blue', 'red'] useEffect(() => { if (terminalRef.current) { terminalRef.current.scrollTop = terminalRef.current.scrollHeight } }, [history]) const handleCommand = (cmd: string) => { const trimmedCmd = cmd.trim() // Add command to history setHistory(prev => [...prev, { type: 'command', content: `$ ${trimmedCmd}` }]) if (trimmedCmd === 'open-hog fetch') { // Display neofetch-style output const fetchOutput = (

{`
   ██████╗ ██████╗ ███████╗███╗   ██╗
  ██╔═══██╗██╔══██╗██╔════╝████╗  ██║
  ██║   ██║██████╔╝█████╗  ██╔██╗ ██║
  ██║   ██║██╔═══╝ ██╔══╝  ██║╚██╗██║
  ╚██████╔╝██║     ███████╗██║ ╚████║
   ╚═════╝ ╚═╝     ╚══════╝╚═╝  ╚═══╝
  ██╗  ██╗ ██████╗  ██████╗ 
  ██║  ██║██╔═══██╗██╔════╝ 
  ███████║██║   ██║██║  ███╗
  ██╔══██║██║   ██║██║   ██║
  ██║  ██║╚██████╔╝╚██████╔╝
  ╚═╝  ╚═╝ ╚═════╝  ╚═════╝
`}

Created by: xy

Built with: v0

Version: 1.0.0

Theme: OS-inspired

Framework: Next.js

Current BG: {bgColor}

An OS-themed website template

) setHistory(prev => [...prev, { type: 'output', content: fetchOutput }]) } else if (trimmedCmd === 'open-hog change bg') { // Cycle through background colors const currentIndex = colors.indexOf(bgColor) const nextIndex = (currentIndex + 1) % colors.length const nextColor = colors[nextIndex] setBgColor(nextColor) onBackgroundChange(nextColor) setHistory(prev => [...prev, { type: 'output', content: `Background changed to ${nextColor}` }]) } else if (trimmedCmd === 'clear') { setHistory([]) } else if (trimmedCmd === 'help') { setHistory(prev => [...prev, { type: 'output', content: (

Available Commands:

open-hog fetch - Display OpenHog system info

open-hog change bg - Change background color

clear - Clear terminal

help - Show this help message

) }]) } else if (trimmedCmd) { setHistory(prev => [...prev, { type: 'output', content: `Command not found: ${trimmedCmd}. Type "help" for available commands.` }]) } setCurrentInput('') } const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handleCommand(currentInput) } } return (

inputRef.current?.focus()} >

{history.map((item, index) => (

{item.content}

))} {/* Input Line */}

$ setCurrentInput(e.target.value)} onKeyDown={handleKeyDown} className="flex-1 bg-transparent outline-none text-white font-mono" autoFocus />

) }

About

Tags

Share

About

Tags

Share

About

Tags

Share

About

Tags

Share