184 Components
macOS Window Mockup
MockupsAuthentic macOS Sequoia frosted glass window frame with interactive traffic light controls (close, minimize, expand with hover symbols), centered window title, and active/inactive window states.
App Workspace— Sequoia
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/mac-os-window-mockup.json"
Props
TypeScript props supported by <MacOSWindowMockup />.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Untitled Window" | Window title in center of header. |
| subtitle | string | — | Optional breadcrumb or subtitle text. |
| frosted | boolean | true | Enable backdrop-blur frosted glass vibrancy. |
| active | boolean | true | Active window focus state. |
| children | React.ReactNode | — | Window body content. |
Key Features
- Interactive traffic lights with hover action symbols (✕, −, ⤢).
- Spring minimize collapse and expand animation.
- Frosted glass backdrop-blur titlebar with centered title label.
- Active and inactive window focus styles.
- Fully customizable children slot for dashboards, code, or documentation.
Keyboard & Accessibility
- Traffic light buttons include accessible aria-label attributes.
- Content inside window retains natural DOM focus order.