Window

Overlays & Feedback

Authentic macOS window container with traffic lights, titlebar, sidebar, content area, and status bar.

Installation

$npx shadcn-macos@latest add window

Interactive Window Demo

Finder — Documents4 items, 128.4 GB available

Project Assets

12 items

Design Specs.pdf

2.4 MB

4 items128.4 GB available

<Window />— Authentic macOS Desktop application window with glass blur and shadow depth.

Prop	Type	Default	Description
title	string	—	Accessible title for the window.
isFocused	boolean	true	Active window focus state controlling titlebar accent saturation.
className	string	—	Custom CSS classes.

<WindowHeader />— Titlebar toolbar containing traffic light buttons and custom actions.

Prop	Type	Default	Description
title	React.ReactNode	—	Title text or custom center breadcrumbs widget.
alignTitle	"left" \| "center"	"center"	Alignment of the window title text.
showTrafficLights	boolean	true	Whether to render red, yellow, green window dots.
onClose	() => void	—	Close traffic light click handler.
onMinimize	() => void	—	Minimize traffic light click handler.
onMaximize	() => void	—	Maximize traffic light click handler.

<WindowSidebar /> / <WindowContent /> / <WindowFooter />— Structural layout partitions for authentic desktop window apps.

Prop	Type	Default	Description
className	string	—	Custom classes.
children	React.ReactNode	—	Partition content.