Browser

Display content in a browser window mockup with address bar.

Import

import { Browser } from 'asterui'

Examples

Basic Browser

Browser window with URL bar.

</>

https://daisyui.com

Hello!

import { Browser } from 'asterui'

function App() {
  return (
      <Browser url="https://daisyui.com" className="w-full">
        <div className="grid place-content-center h-40 bg-base-200">
          Hello!
        </div>
      </Browser>
    )
}

export default App

Website Preview

Preview a website layout.

</>

https://mysite.com

MySite

Welcome

Content here...

import { Browser } from 'asterui'

function App() {
  return (
      <Browser url="https://mysite.com" className="w-full">
        <div className="bg-base-100">
          <div className="bg-primary text-primary-content p-4">
            <span className="font-bold">MySite</span>
          </div>
          <div className="p-4 h-32">
            <h2 className="text-xl font-bold">Welcome</h2>
            <p className="text-base-content/70">Content here...</p>
          </div>
        </div>
      </Browser>
    )
}

export default App

With Background

Custom background color.

</>

https://app.example.com

Gradient

import { Browser } from 'asterui'

function App() {
  return (
      <Browser url="https://app.example.com" className="w-full">
        <div className="bg-gradient-to-br from-purple-500 to-pink-500 h-48 grid place-content-center">
          <span className="text-white text-2xl font-bold">Gradient</span>
        </div>
      </Browser>
    )
}

export default App

Dashboard Preview

Mock up a dashboard UI.

</>

https://dashboard.example.com

Users

1,234

Revenue

$5,678

import { Browser } from 'asterui'

function App() {
  return (
      <Browser url="https://dashboard.example.com" className="w-full">
        <div className="bg-base-100 p-4 h-56">
          <div className="flex gap-4 mb-4">
            <div className="bg-primary/10 rounded-lg p-3 flex-1">
              <div className="text-xs text-base-content/60">Users</div>
              <div className="text-xl font-bold">1,234</div>
            </div>
            <div className="bg-secondary/10 rounded-lg p-3 flex-1">
              <div className="text-xs text-base-content/60">Revenue</div>
              <div className="text-xl font-bold">$5,678</div>
            </div>
          </div>
          <div className="bg-base-200 rounded-lg h-24"></div>
        </div>
      </Browser>
    )
}

export default App

API

Browser

Property	Description	Type	Default
children	Content inside the browser viewport	React.ReactNode	-
url	URL shown in address bar	string	'https://example.com'
className	Classes for browser container	string	-
contentClassName	Classes for content area	string	-