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.
Canonical
koala.csproj
+.NET 10
+PostgreSQL
+Tailwind CSS
+Alpine.js
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
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.