MacWindow
A macOS-style window container with traffic light buttons (close, minimize, maximize) and an optional title bar.
Preview
Your content here
Installation
npx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/mac-window.jsonnpx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/mac-window.jsonpnpm dlx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/mac-window.jsonbunx shadcn@latest add https://raw.githubusercontent.com/cjroth/ink-web/main/packages/ink-ui/registry/mac-window.jsonUsage
"use client";
import { Box, Text } from "ink";
import { MacWindow } from '@/components/ui/mac-window'
import { InkXterm } from "ink-web";
import "ink-web/css";
import "xterm/css/xterm.css";
export default function Terminal() {
return (
<MacWindow title="Terminal">
<InkXterm focus>
<Box flexDirection="column">
<Text color="green">Hello from Ink!</Text>
</Box>
</InkXterm>
</MacWindow>
)
}Props
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Content to render inside the window |
className | string | Additional CSS classes |
title | string | Optional title displayed in the center of the title bar |
onClose | () => void | Callback when close button is clicked |
onMinimize | () => void | Callback when minimize button is clicked |
onMaximize | () => void | Callback when maximize button is clicked |
Examples
Basic Window
<MacWindow>
<div className="p-4">
<p>Window content</p>
</div>
</MacWindow>With Title
<MacWindow title="My App">
<div className="p-4">
<p>Window with title</p>
</div>
</MacWindow>With Button Handlers
<MacWindow
title="Terminal"
onClose={() => console.log('Close clicked')}
onMinimize={() => console.log('Minimize clicked')}
onMaximize={() => console.log('Maximize clicked')}
>
<div className="p-4">
<p>Interactive window</p>
</div>
</MacWindow>