Installation
npm install @z-os/uiComponents
Window
A draggable, resizable window with traffic light controls.
import { Window } from '@z-os/ui';
function MyApp() {
return (
<Window
title="My Window"
defaultPosition={{ x: 100, y: 100 }}
defaultSize={{ width: 600, height: 400 }}
onClose={() => console.log('closed')}
onMinimize={() => console.log('minimized')}
onMaximize={() => console.log('maximized')}
>
<div className="p-4">Window content</div>
</Window>
);
}
Preview
Window content goes here
Dock
macOS-style dock for app launchers.
import { Dock, DockItem } from '@z-os/ui';
function Desktop() {
const apps = [
{ id: 'calc', icon: '🧮', name: 'Calculator', isRunning: true },
{ id: 'term', icon: '⬛', name: 'Terminal', isRunning: false },
];
return (
<Dock position="bottom">
{apps.map(app => (
<DockItem
key={app.id}
icon={app.icon}
name={app.name}
isRunning={app.isRunning}
onClick={() => openApp(app.id)}
/>
))}
</Dock>
);
}
🧮
⬛
📝
MenuBar
System menu bar with app menus and status icons.
import { MenuBar, Menu, MenuItem } from '@z-os/ui';
function Desktop() {
return (
<MenuBar>
<Menu label="File">
<MenuItem label="New" shortcut="⌘N" onClick={handleNew} />
<MenuItem label="Open" shortcut="⌘O" onClick={handleOpen} />
<MenuItem separator />
<MenuItem label="Save" shortcut="⌘S" onClick={handleSave} />
</Menu>
<Menu label="Edit">
<MenuItem label="Undo" shortcut="⌘Z" />
<MenuItem label="Redo" shortcut="⇧⌘Z" />
</Menu>
</MenuBar>
);
}
🍎
zOS
File
Edit
View
Thu, Dec 25 3:30 AM
Button
Styled buttons with multiple variants.
import { Button } from '@z-os/ui';
function App() {
return (
<div className="flex gap-2">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>
<Button variant="ghost">Ghost</Button>
</div>
);
}Input
Text inputs with labels and validation states.
import { Input } from '@z-os/ui';
function Form() {
return (
<div className="space-y-4">
<Input label="Username" placeholder="Enter username" />
<Input label="Password" type="password" />
<Input label="Email" error="Invalid email address" />
</div>
);
}Dialog
Modal dialogs for alerts and confirmations.
import { Dialog, useDialog } from '@z-os/ui';
function App() {
const dialog = useDialog();
const handleDelete = async () => {
const confirmed = await dialog.confirm({
title: 'Delete File',
message: 'Are you sure you want to delete this file?',
confirmText: 'Delete',
cancelText: 'Cancel',
variant: 'danger'
});
if (confirmed) {
// Delete the file
}
};
}Theming
Customize the look and feel with CSS variables.
:root {
--zos-bg-primary: #1c1c1c;
--zos-bg-secondary: #2d2d2d;
--zos-text-primary: #ffffff;
--zos-text-secondary: #a0a0a0;
--zos-accent: #007aff;
--zos-danger: #ff3b30;
--zos-success: #34c759;
--zos-warning: #ff9500;
}