Component

Browser Chrome Mock

A decorative browser window frame that wraps arbitrary content with traffic-light dots, a monospace URL bar with a bold domain, and an optional live / rec status badge — useful for product screenshots, demos, and onboarding flows.

Basic

Wrap any content with a URL to render a minimal browser frame.

loopwyse.com/dashboard

Page content renders here.

Live status

Pass status="live" to show an emerald badge indicating an active session.

loopwyse.com/r/7k2f

live

Live session content renders here.

Rec status

Pass status="rec" to show a destructive badge with a pulsing dot indicating a recording in progress.

loopwyse.com/recordings/abc123

rec

Recording playback content renders here.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { BrowserChromeMock } from '@refraction-ui/react'

export function MyComponent() {
  return (
    <BrowserChromeMock url="loopwyse.com/r/7k2f" status="live">
      <img src="/screenshot.png" alt="App screenshot" />
    </BrowserChromeMock>
  )
}

Props

Prop	Type	Default	Description
`url`	`string`	--	URL displayed in the address bar. The domain (up to the first /) is rendered bold; the path follows in normal weight.
`status`	`'live' \| 'rec'`	--	Optional status badge shown in the chrome bar. live renders an emerald tint; rec renders a destructive tint with a pulsing dot.
`children`	`React.ReactNode`	--	Content rendered inside the browser content area.
`className`	`string`	--	Additional CSS classes to apply to the outer frame.