Get started →

    Browser Window

    The <BrowserWindow> component wraps content in a macOS-style browser frame with traffic-light dots, optional tabs, and an optional URL bar below the header. Built on top of DesktopWindow.

    With URL

    Code

    import { BrowserWindow } from '@theme'

<BrowserWindow url="https://docs.example.com">

# Welcome to My Docs

Get started with our platform in minutes.

</BrowserWindow>

    Output

    https://docs.example.com

    Welcome to My Docs

    Get started with our platform in minutes.

    With tabs and URL

    Code

    <BrowserWindow
  tabs={[{ name: 'docs.example.com', active: true }, { name: 'github.com' }]}
  url="https://docs.example.com/guides"
>

Content with browser tabs and a URL bar.

</BrowserWindow>

    Output

    docs.example.comgithub.com
    https://docs.example.com/guides

    Content with browser tabs and a URL bar.

    Without URL

    Omit the url prop for a minimal frame:

    Code

    <BrowserWindow>

Content without a URL bar — useful for generic previews.

</BrowserWindow>

    Output

    Content without a URL bar — useful for generic previews.

    Wrapping components

    Combine with other ciderpress components to preview how they render:

    Code

    import { BrowserWindow, SectionCard, SectionGrid } from '@theme'

<BrowserWindow url="https://docs.example.com/guides">

<SectionGrid>
  <SectionCard
    href="/guides/setup"
    title="Setup"
    description="Install and configure your project."
    icon={{ id: 'pixelarticons:cloud-upload', color: 'blue' }}
  />
  <SectionCard
    href="/guides/deploy"
    title="Deploy"
    description="Ship to production in one command."
    icon={{ id: 'pixelarticons:speed-fast', color: 'green' }}
  />
</SectionGrid>

</BrowserWindow>

    Output

    https://docs.example.com/guides
    Setup
    Install and configure your project.
    Deploy
    Ship to production in one command.

    Props

    PropTypeRequiredDefaultDescription
    urlstringno—URL displayed in the address bar below the header
    tabsWindowTab[]no—Tabs rendered in the title bar
    childrenReactNodeyes—Content rendered inside the window body

    References