Get started →

    Desktop Window

    The <DesktopWindow> component is the base window chrome with macOS-style traffic-light dots. All other window components — BrowserWindow, IDEWindow, and TerminalWindow — build on top of it.

    Use DesktopWindow directly when you need a plain window frame without browser, IDE, or terminal styling.

    Basic usage

    Code

    import { DesktopWindow } from '@theme'

<DesktopWindow>

Any content inside a clean window frame.

</DesktopWindow>

    Output

    Any content inside a clean window frame.

    With title

    Code

    <DesktopWindow title="Preview">

Content with a centered title in the title bar.

</DesktopWindow>

    Output

    Preview

    Content with a centered title in the title bar.

    With tabs

    Code

    <DesktopWindow tabs={[{ name: 'Overview', active: true }, { name: 'Settings' }]}>

Content with tabs in the title bar.

</DesktopWindow>

    Output

    OverviewSettings

    Content with tabs in the title bar.

    Props

    PropTypeRequiredDefaultDescription
    titlestringno—Title text centered in the title bar (12px mono, muted)
    tabsWindowTab[]no—Tabs rendered in the title bar (replaces title when present)
    variantstringno—Variant styling ('terminal', 'ide', 'browser'). Used internally by derived window components.
    childrenReactNodeyes—Content rendered inside the window body

    When both title and tabs are provided, tabs takes precedence.

    References