Skip to content
CroStreamUI kit

Window chrome

macOS and Windows drawn in code: app windows, browsers, Finder and Explorer, terminals, desktops and notifications, so docs can show UI without screenshots.

01Window

Window

The frame everything else is built on: traffic lights or caption buttons, unified or separate title bars, sidebars, toolbars and status bars, in each system's own light and dark mode. Drawn at a design size and scaled crisply to any width.

Both systems, both modes appearance is the simulated OS's mode; it doesn't follow the kit theme.
  • All notes
  • Stream plans
  • Sponsors
  • Ideas
Stream notes

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
macOS · light
  • All notes
  • Stream plans
  • Sponsors
  • Ideas
Stream notes

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
macOS · dark
Stream notes

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
Windows 11 · light
Stream notes

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
Windows 11 · dark
macOS title bars unified (52px, title in the toolbar) · separate (28px bar over a toolbar) · none (lights float over the content)
Unified

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
titlebar="unified"
Separate

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
titlebar="separate"

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
titlebar="none"
States inactive · hovered controls · maximized
Inactive

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
active={false}
Hovered lights

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
controlGlyphs
Close hovered

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
hoverControl="close"
Maximized

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
maximized · restore glyph
Fit A 960 × 600 design squeezed into a 320px column: zoom, not a blurry transform.
Scaled to fit

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
Fluid mode='fluid': lays out at the container's width instead of scaling.
Fluid

Stream checklist

  • Water bottle on the desk
  • OBS scene "Gameplay" ready
  • Test the raid alert
  • Post the "going live" tweet
Props Everything is a prop or a snippet.
os
'macos' | 'windows' Inherited from a Desktop when inside one.
appearance
'light' | 'dark' The simulated OS's own mode, independent of the kit theme.
titlebar
'unified' | 'separate' | 'none' macOS: 52px toolbar with the title, 28px title bar over a toolbar, or no bar.
toolbar · sidebar · statusbar
Snippet Real content: stays accessible.
active · maximized
boolean Inactive greys the lights and title; maximized drops radius and shadow.
controls · controlGlyphs · hoverControl
boolean | {close, minimize, maximize}
content
'os' | 'kit' | 'none' 'kit' gives the content the app's own graphite surface.
mode · width · height
'fit' | 'fluid', px fit draws at width × height and zooms to the container.
label · pictorial
string, boolean Required name; pictorial makes it role="img".

02BrowserWindow

BrowserWindow

Safari-style on macOS, with a unified toolbar and the address centred; Edge-style on Windows, with tabs in the title bar and the address row beneath. Tabs, padlock, loading and bookmarks are all props; the page is yours.

macOS · light Tabs appear as a bar under the toolbar once there's more than one.
CroStream FeaturesDocsDownload

Docs · Overlays

Add your first overlay

Copy the overlay link, then add it to OBS as a Browser Source sized 1920 × 1080.

123
macOS · dark · loading A local overlay URL: no padlock, a progress line in the address field.

pixel_mage is raiding with 34 viewers!

Transparent areas show as a checkerboard. Add this URL as a Browser Source in OBS.

Windows · light Tabs in the title bar, a bookmarks bar, the full URL with the host emphasised.
CroStream FeaturesDocsDownload

Docs · Overlays

Add your first overlay

Copy the overlay link, then add it to OBS as a Browser Source sized 1920 × 1080.

123
Windows · dark · loading The refresh button becomes stop while a page loads.

pixel_mage is raiding with 34 viewers!

Transparent areas show as a checkerboard. Add this URL as a Browser Source in OBS.

03FileBrowser

FileBrowser

Finder and File Explorer: sidebars, path and address bars, icon and list views, selections and status lines, from a plain list of files. Pictorial by default: a labelled picture of a folder.

Finder · icons · dark Thumbnails as kind glyphs with extension labels; selection paints the glyph and the name.
Finder · list · light Striped rows, an accent selection, path bar and free space below.
Explorer · details · light Tab, address and command bars, the navigation pane with pins, details columns and the status bar.
Explorer · icons · dark Large icons; a selected tile gets the accent edge.
File glyphs and app tiles Drawn for the kit in each system's idiom; no vendor artwork.
macos folderdocumenttextpdfimagevideoaudioarchivecodeappdisk
crostreamfilesbrowserterminalsettingsrecorderchatmusicphotosnotescalendarstore
windows folderdocumenttextpdfimagevideoaudioarchivecodeappdisk
crostreamfilesbrowserterminalsettingsrecorderchatmusicphotosnotescalendarstore

04Terminal

Terminal

macOS Terminal and Windows Terminal, for the development docs. Lines carry a prompt, a command and toned output; the cursor blinks, and holds still under reduced motion.

macOS · light profile
macOS · dark profile
Windows Terminal · dark Tabs with a profile glyph in the title bar.
Windows Terminal · light

05Desktop

Desktop

A whole screen to compose a scene on: wallpaper, the menu bar and Dock or the taskbar and Start menu, with windows and notifications placed in scene pixels. The scene scales as one picture; real content inside the windows stays accessible.

Scene: CroStream on a Mac The app window holds real kit components; Safari shows its alerts overlay URL.

Dashboard

Live , 1,284 viewers
Viewers Peak 1,402

1,284

OBS Scene: Gameplay

Connected

Moments Caught tonight

6 clips

Recent activity

  • 21:14 Raid from pixel_mage · 34 viewers
  • 21:12 Hydrate! redeemed by moss
  • 21:09 Trigger !lurk ran macro Lurk mode

pixel_mage is raiding with 34 viewers!

Transparent areas show as a checkerboard. Add this URL as a Browser Source in OBS.

Moment capturednow

Chat spiked 6.2× in 8 seconds.

Scene: a clip saved on Windows 11 Explorer open at the Moments folder, the toast above the taskbar.
Clip saved

moment-0042-raid.mp4 is in Videos › CroStream › Moments.

Windows 11 · dark · Start open startMenu: pinned apps, recommended files, the account row.
macOS · light · graphite wallpaper wallpaper='graphite' uses the kit's own surfaces for brand scenes.

06Notification

Notification

A macOS banner, optionally stacked, and a Windows 11 toast with actions. Inside a Desktop they take the system's own corner.

macOS · light
Moment capturednow

Chat spiked 6.2× in 8 seconds. Review it before the stream ends.

macOS · dark · stacked stack=2: two more behind.
Raid incoming2m ago

pixel_mage is raiding with 34 viewers.

Windows · light · actions The first action is the accent button.
Clip saved

moment-0042-raid.mp4 is in Videos › CroStream › Moments.

Windows · dark
OBS disconnected

Scenes and alerts are paused until it's back.