UI components for zOS - macOS-style windows, controls, and more.
npm install @z-os/uiUI components for zOS - macOS-style windows, controls, and more.


``bash`
npm install @z-os/uior
pnpm add @z-os/ui
- ZWindow - Draggable, resizable macOS-style windows
- Window Controls - Traffic light buttons (close, minimize, maximize)
- Quick Look - File preview overlays
- Utilities - Class name helpers and theming
`tsx
import { ZWindow } from '@z-os/ui';
function MyApp({ onClose, onFocus }) {
return (
onClose={onClose}
onFocus={onFocus}
defaultWidth={600}
defaultHeight={400}
defaultPosition={{ x: 100, y: 100 }}
minWidth={300}
minHeight={200}
resizable={true}
>
This is my application content.
$3
`tsx
import { WindowTitleBar } from '@z-os/ui';function CustomWindow() {
return (
title="Custom Window"
onClose={() => console.log('close')}
onMinimize={() => console.log('minimize')}
onMaximize={() => console.log('maximize')}
showControls={true}
/>
...
);
}
`$3
`tsx
import { WindowControls } from '@z-os/ui';function TitleBar({ onClose, onMinimize, onMaximize }) {
return (
onClose={onClose}
onMinimize={onMinimize}
onMaximize={onMaximize}
/>
Window Title
);
}
`$3
`tsx
import { QuickLookOverlay } from '@z-os/ui/quick-look';function FilePreview({ file, onClose }) {
return (
file={file}
onClose={onClose}
/>
);
}
`$3
`tsx
import { cn } from '@z-os/ui';function Button({ className, variant, ...props }) {
return (
className={cn(
'px-4 py-2 rounded',
variant === 'primary' && 'bg-blue-500 text-white',
variant === 'secondary' && 'bg-gray-200 text-gray-800',
className
)}
{...props}
/>
);
}
`Components
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
title | string | - | Window title |
| onClose | () => void | - | Close handler |
| onFocus | () => void | - | Focus handler |
| onMinimize | () => void | - | Minimize handler |
| onMaximize | () => void | - | Maximize handler |
| defaultWidth | number | 400 | Initial width |
| defaultHeight | number | 300 | Initial height |
| defaultPosition | { x, y } | centered | Initial position |
| minWidth | number | 200 | Minimum width |
| minHeight | number | 150 | Minimum height |
| resizable | boolean | true | Allow resizing |
| children | ReactNode | - | Window content |$3
| Prop | Type | Description |
|------|------|-------------|
|
onClose | () => void | Close button handler |
| onMinimize | () => void | Minimize button handler |
| onMaximize | () => void | Maximize button handler |
| disabled | boolean | Disable all controls |Styling
Components use Tailwind CSS classes. Ensure you have Tailwind configured:
`js
// tailwind.config.js
module.exports = {
content: [
'./src/*/.{js,ts,jsx,tsx}',
'./node_modules/@z-os/ui/*/.{js,ts,jsx,tsx}',
],
// ...
};
``~23 KB (gzipped)
MIT
- GitHub
- Documentation
- npm