Mac Window

FreeNew

A desktop-style window frame with traffic-light controls, a title bar, an optional toolbar and a translucent sidebar.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

active

controls

children

controls

selected

Guide and examples

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/mac-window.json

Usage

import {
  MacWindow,
  MacWindowContent,
  MacWindowTitleBar,
  MacWindowToolbarButton,
} from "@/components/ui/mac-window"

<MacWindow className="h-72 w-full max-w-lg" onClose={() => {}}>
  <MacWindowTitleBar title="Notes">
    <MacWindowToolbarButton aria-label="Search">
      <Search />
    </MacWindowToolbarButton>
  </MacWindowTitleBar>
  <MacWindowContent className="p-4">Window content</MacWindowContent>
</MacWindow>

Props

MacWindow

Prop	Type	Default	Description
`active`	`boolean`	`true`	Active window: colored traffic lights and full-strength title. Inactive windows gray out.
`onClose`	`() => void`	-	Called by the close button. Without a handler the light is drawn but not focusable.
`onMinimize`	`() => void`	-	Called by the minimize button.
`onZoom`	`() => void`	-	Called by the zoom button.

Also accepts all <div> props. The light colors are the --mac-close, --mac-minimize and --mac-zoom CSS variables.

MacWindowTitleBar

Prop	Type	Default	Description
`title`	`React.ReactNode`	-	Title, centered in the bar.
`controls`	`boolean`	`true`	Draw the traffic lights. Turn off when a `MacWindowSidebar` already shows them.
`children`	`React.ReactNode`	-	Toolbar content. When present, the bar grows to 52px.

MacWindowControls

Prop	Type	Default	Description
`labels`	`{ close?: string; minimize?: string; zoom?: string }`	-	Accessible labels for the three buttons.

MacWindowSidebar

Prop	Type	Default	Description
`controls`	`boolean`	`true`	Draw the traffic lights at the top of the sidebar.

MacWindowSidebarItem

Prop	Type	Default	Description
`selected`	`boolean`	`false`	Marks the selected row and sets `aria-current`.

Also accepts all <button> props. MacWindowToolbarButton is a plain <button>; MacWindowMain and MacWindowContent are plain <div>s.

Accessibility

Traffic lights render as buttons with labels only when their handler is set; otherwise they are hidden from assistive tech.
The controls row is always laid out left to right, matching desktop convention, even in RTL.