MacWindowFrame

Decorative macOS-style window chrome that wraps showcase content such as code demos, screenshots, and portfolio pieces.

Status: beta. Group: structure. Markdown version: /design-system/components/mac-window-frame.md

When to use

MacWindowFrame wraps showcase content; code demos, screenshots, portfolio pieces; in decorative macOS-style chrome. The title and optional action button come through i18n keys (titleKey, actionLabelKey). It is presentation, not a real window: the traffic lights are paint, and anything needing dialog semantics (focus trap, dismissal) belongs in Modal.

When not to use

Do not use it as an actual window or dialog; Modal owns focus and dismissal semantics.

Look-alikes

Modal: Do not use it as an actual window or dialog; Modal owns focus and dismissal semantics.

Props

MacWindowFrame props
Prop	Type	Default	Description	Required
`titleKey`	`string`	`macWindowFrame.title`	Translation key for the window title.	No
`actionLabelKey`	`string`	`macWindowFrame.action`	Optional label for the action button.	No
`onAction`	`() => void`	none	Called when the action button is pressed.	No
`density`	`"compact" \| "comfortable"`	`comfortable`	Density variant.	No
`children`	`React.ReactNode`	none	Content to render inside the frame.	Yes
`className`	`string`	`""`	Optional className passthrough.	No

Variants

Available densities: compact, comfortable (default compact).

Invalid combinations

The contract records no invalid combinations.

Keyboard

The contract records no keyboard interaction.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

MacWindowFrame rules
Level	Rule	How it is checked
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	A human completed an end-to-end accessibility review of this component.	Manual review, last on 2026-05-28.
SHOULD	Use it to frame demos and screenshots where the desktop-app look sells the context.	Not stated in the contract.
SHOULD	Pass titles through i18n keys (titleKey), matching how the site renders all user-facing copy.	Not stated in the contract.
SHOULD	Use density="compact" inside dense grids of demos.	Not stated in the contract.
SHOULD	Provide onAction only when the button does something real; the button hides itself otherwise.	Not stated in the contract.
SHOULD NOT	Do not rely on the traffic-light dots for any function; they are decoration and convey nothing to AT.	Not stated in the contract.
MUST NOT	Maintainers: Do not bypass design tokens or skip forced-colors verification at beta.	Release review; not machine-checked.

Install and import

Install: npm install @digitaltableteur/react (version 0.9.1, restricted access on npm).
Import: import { MacWindowFrame } from "@digitaltableteur/react";
Entry point: @digitaltableteur/react/layout exports it too.
Styles: import @digitaltableteur/react/style.css once at the app boundary.
Also available as the custom element <dt-mac-window-frame>; see the custom elements manifest.