The Desktop namespace provides components and hooks for building macOS-style desktop interfaces. These components work together to create a cohesive desktop experience with window management, application launching, and settings.
Components
| Component | Description |
|---|---|
| Window | Draggable, resizable window with minimize, maximize, and close controls |
| Spotlight | macOS Spotlight-style search and command palette |
Hooks
| Hook | Description |
|---|---|
useWindowManager | Manage multiple windows with open/close/toggle state |
useDesktopSettings | Persist desktop settings like theme, dock position |
useOverlayManager | Manage overlay states (spotlight, about dialog, etc.) |
useKeyboardShortcuts | Register keyboard shortcuts (⌘+Space, ⌘+Q, etc.) |
See Desktop Hooks for detailed hook documentation.
Installation
npx @hanzo/ui@latest add desktopQuick Start
import {
Spotlight,
useKeyboardShortcuts,
useWindowManager,
Window,
} from "@hanzo/ui/desktop"
import { Dock, DockItem } from "@hanzo/ui/dock"
export function MyDesktop() {
const windows = useWindowManager()
const [showSpotlight, setShowSpotlight] = useState(false)
useKeyboardShortcuts([
{ key: " ", meta: true, action: () => setShowSpotlight(true) },
])
return (
<div className="h-screen relative">
{/* Windows */}
{windows.isOpen("Settings") && (
<Window
title="Settings"
onClose={() => windows.closeWindow("Settings")}
>
<div className="p-4">Settings content</div>
</Window>
)}
{/* Spotlight */}
<Spotlight
isOpen={showSpotlight}
onClose={() => setShowSpotlight(false)}
items={[{ id: "settings", title: "Settings", category: "Apps" }]}
onSelect={(item) => {
windows.openWindow(item.title)
setShowSpotlight(false)
}}
/>
{/* Dock */}
<Dock position="bottom">
<DockItem
tooltip="Settings"
onClick={() => windows.toggleWindow("Settings")}
/>
</Dock>
</div>
)
}Related Components
- Dock - macOS-style dock with magnification
- macOS Dock - Full macOS dock variant