mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
125 lines
3.4 KiB
Plaintext
125 lines
3.4 KiB
Plaintext
---
|
|
title: Desktop
|
|
description: macOS-style desktop components for building OS-like interfaces with windows, spotlight search, dock, and more
|
|
component: true
|
|
---
|
|
|
|
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](/docs/components/desktop-window) | Draggable, resizable window with minimize, maximize, and close controls |
|
|
| [Spotlight](/docs/components/desktop-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](/docs/components/desktop-hooks) for detailed hook documentation.
|
|
|
|
## Installation
|
|
|
|
<Tabs defaultValue="cli">
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">CLI</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx @hanzo/ui@latest add desktop
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
```bash
|
|
npm install @hanzo/ui framer-motion lucide-react
|
|
```
|
|
|
|
Then import from the desktop namespace:
|
|
|
|
```tsx
|
|
import {
|
|
Spotlight,
|
|
useDesktopSettings,
|
|
useKeyboardShortcuts,
|
|
useOverlayManager,
|
|
useWindowManager,
|
|
Window,
|
|
} from "@hanzo/ui/desktop"
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
</Tabs>
|
|
|
|
## Quick Start
|
|
|
|
```tsx
|
|
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](/docs/components/dock) - macOS-style dock with magnification
|
|
- [macOS Dock](/docs/components/macos-dock) - Full macOS dock variant
|