Window

View in Storybook

A Window is the primary container for placing interfaces. It provides the classic Win95 frame with an optional header bar.

---

Overview

My Window

A Win95 window with header bar.

---

When to use

• As the outermost container for a full interface or screen section.
• As a draggable modal for secondary actions (e.g. "Add new bill").

When not to use

• Nested inside another Window — windows should not be nested.
• For grouping content within a window — use Panel instead.

---

Variants

With Header Actions

Bills

Internet — R$ 89,90

Phone — R$ 79,90

Stays in the page layout as the base foundation for placing elements. Use it to wrap an entire app view or a major section.

Modal

Visually identical to the default, but renders centered with fixed positioning. Modal windows should always include a close button in the header actions. Draggable behavior will be added in a future iteration.

---

Without Header

A window without a title bar.

A window can be rendered without a title bar when a header is not needed.

---

Anatomy

1. Outer border: 2px solid --panel-border-outer.
2. Inner border: 2px solid --panel-border-inner.
3. Header bar: 32px height, --color-bg-header background, with title and optional action buttons.
4. Content area: Free-form children area.

---

Controls

Interactive controls are available in Storybook. Open Storybook

---

Props

---

Token mapping

Property	Token
background	--color-accent-primary
outer border	--panel-border-outer
inner border	--panel-border-inner
header background	--color-bg-header
header bottom border	--color-window-header-border

---

Changelog

Date	Change
2026-03-22	Added modal prop for centered fixed-position windows
2026-03-22	Initial component created with header bar and action slots