ReactDesk

🖥️ A powerful React-based desktop environment library

Create stunning Windows 11 and macOS-like desktop interfaces with ease

Demo • Documentation • Examples • Contributing

---

✨ Features

🚀 Quick Start

$3

``bash
npm install @reactdesk/core


or

`tsx
import React from 'react';
import { ReactDesk } from '@reactdesk/core';
import type { ReactDeskConfig } from '@reactdesk/core';

const config: ReactDeskConfig = {
themeName: 'win11',
applications: [
{
name: 'My App',
icon: '📁',
windowContent: () =>

export default App;
`

📖 Documentation

$3

#### Theme Configuration

`typescript
interface ThemeConfig {
themeName?: 'win11' | 'macos'; // Desktop theme
themeLayout?: 'win11' | 'macos'; // Layout style
colorScheme?: 'light' | 'dark'; // Color scheme
wallpaper?: string | React.ReactNode; // Background
}
`

#### Window Configuration

`typescript
interface WindowConfig {
title?: string; // Window title
icon?: string | React.ReactNode; // Window icon
defaultSize?: { width: number; height: number };
initialRelativePosition?: { top?: number; left?: number; };
allowResizing?: boolean; // Enable resizing
hideTitlebar?: boolean; // Hide titlebar
backgroundColor?: string; // Window background
maximized?: boolean; // Start maximized
minimized?: boolean; // Start minimized
}
`

#### Application Definition

`typescript
interface Application {
name: string; // App name
icon?: string | React.ReactNode; // App icon
windowContent: React.FC; // Window content
windowConfig?: WindowConfig; // Window settings
taskbarPin?: boolean; // Pin to taskbar
runOnStart?: boolean; // Auto-start
singleton?: boolean; // Single instance
}
`

$3

#### Custom Wallpaper

`tsx
wallpaper="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
// or use an image
wallpaper="https://example.com/wallpaper.jpg"
// or a React component
wallpaper={}
/>
`

#### Multiple Windows

`tsx
const config: ReactDeskConfig = {
initialState: {
windows: [
{
Component: FileExplorer,
title: 'File Explorer',
defaultSize: { width: 800, height: 600 },
initialRelativePosition: { top: 50, left: 50 }
},
{
Component: Terminal,
title: 'Terminal',
defaultSize: { width: 600, height: 400 },
initialRelativePosition: { top: 100, left: 100 }
}
]
}
};
`

#### Using Hooks

`tsx
import { useWindows, useProcesses, useSession } from '@reactdesk/core';

function MyComponent() {
const { createWindow, closeWindow, maximize } = useWindows();
const { createProcess } = useProcesses();
const { foregroundId } = useSession();

const openNewWindow = () => {
const windowId = createWindow({
Component: MyWindowContent,
title: 'New Window',
defaultSize: { width: 600, height: 400 }
});
};

return Open Window;
}
`

🎨 Themes

$3

`
ReactDesk
├── SignalProvider # Event system
├── ViewportProvider # Screen management
├── SessionProvider # Session state
├── ProcessProvider # Process management
├── WindowsProvider # Window management
├── SyscallProvider # System operations
├── ConfigProvider # Configuration
├── ElementsProvider # DOM references
└── MenuProvider # Menu state
`

📊 Performance

- Bundle Size: ~200KB gzipped
- Code Splitting: Automatic chunking for optimal loading
- Lazy Loading: Components loaded on demand
- Animations: GPU-accelerated with Framer Motion
- React 18: Concurrent features for smooth interactions

🛠️ Development

$3

- Node.js >= 16.0.0
- npm >= 7.0.0 or yarn >= 1.22.0

$3

`bash


Clone the repository

`
reactdesk/
├── lib/ # Library source code
│ ├── components/ # React components
│ ├── contexts/ # Context providers
│ ├── hooks/ # Custom hooks
│ ├── styles/ # Themes and styles
│ ├── types/ # TypeScript types
│ └── utils/ # Utility functions
├── src/ # Demo application
├── example/ # Example implementations
├── dist/ # Build output
└── scripts/ # Build and utility scripts
`

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

$3

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature`)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

- Inspired by Windows 11 and macOS design systems
- Built with React
- Styled with styled-components
- Animations by Framer Motion
- Window management with react-rnd

📊 Stats

!GitHub stars
!GitHub forks
!GitHub watchers
!GitHub followers

🗺️ Roadmap

- [ ] Touch and mobile support
- [ ] Virtual desktop spaces
- [ ] File system integration
- [ ] Terminal emulator
- [ ] Notification system
- [ ] Context menus
- [ ] Keyboard shortcuts
- [ ] Accessibility improvements
- [ ] More themes (Ubuntu, KDE, etc.)
- [ ] Plugin system

💬 Community

- Discord Server
- GitHub Discussions
- Twitter
- Stack Overflow

📮 Support

- 🐛 Report Bugs
- 💡 Request Features
- 📧 Email Support
- 💰 Sponsor on GitHub

---