Components Window

Window

A stylised app-window frame for product and code mock-ups — a dark panel topped with the three traffic-light controls and an optional mono title. The chrome lives in the component; the host supplies the content as the slot.

<koala-window>

Canonical

koala.csproj

+.NET 10

+PostgreSQL

+Tailwind CSS

+Alpine.js

<koala-window title="koala.csproj">
    <div class="font-mono text-sm text-gray-300">+ .NET 10</div>
</koala-window>

A titled window framing a code/stack mock-up. The frame, panel colour and traffic-light controls are supplied by the component; everything inside is the host's own markup.

Variants

2 variants

terminal

$koala deploy
shipped in 42s ✓

title="terminal"

No title — just the window chrome and your content.

no title attribute

<koala-window>
    <p class="font-mono text-sm text-gray-300">No title &mdash; just the window chrome and your content.</p>
</koala-window>

Props

1 attribute + slot

Attribute	Values	Notes
title	string?	Optional mono label shown next to the window controls (e.g. a filename). Omit for a bare chrome.
(slot)	markup	Child content renders inside the panel, below the controls. Extra attributes (class, x-data, …) pass through to the frame.

Do & don't

quote.json

{ "total": "£1,240" }

Do Use it to frame a product or code mock-up. Let the component own the chrome; put only your content in the slot.

hand-rolled frame

Don't Don't hand-roll the dark panel + dot row in a page. Reach for <koala-window> so every mock-up matches.