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 @libreapps/ui@latest add desktopQuick Start
import {
Window,
Spotlight,
useWindowManager,
useKeyboardShortcuts
} from "@libreapps/ui/desktop"
import { Dock, DockItem } from "@libreapps/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