A powerful React-based desktop environment library for creating Windows 11-like desktop interfaces with window management, taskbar, themes, and more
npm install reactdesk-coreCreate stunning Windows 11 and macOS-like desktop interfaces with ease
---
| 🪟 Window Management | Draggable, resizable, minimizable, maximizable windows with smooth animations |
| 🎨 Theme Support | Built-in Windows 11 and macOS themes with dark/light mode |
| 📱 Responsive Design | Adapts seamlessly to different screen sizes and orientations |
| 🎯 Window Snapping | 7 different snap layouts for efficient window organization |
| 🖼️ Taskbar & Dock | Fully functional taskbar with window previews and app pinning |
| ⚡ Performance | Optimized rendering with React 18 features and code splitting |
| 🔧 Customizable | Extensive configuration options for appearance and behavior |
| 📦 TypeScript | Full TypeScript support with comprehensive type definitions |
``bash`
npm install @reactdesk/coreor
yarn add @reactdesk/coreor
pnpm add @reactdesk/core
`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: () =>
function App() {
return
}
export default App;
`
#### 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
}
#### Custom Wallpaper
`tsx`
// 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 ;
}
`
ReactDesk uses a modular architecture with context providers for state management:
``
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
- 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
- Node.js >= 16.0.0
- npm >= 7.0.0 or yarn >= 1.22.0
`bashClone the repository
git clone https://github.com/yourusername/reactdesk.git
cd reactdesk
$3
`
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`)This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Windows 11 and macOS design systems
- Built with React
- Styled with styled-components
- Animations by Framer Motion
- Window management with react-rnd
!GitHub stars
!GitHub forks
!GitHub watchers
!GitHub followers
- [ ] 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
- Discord Server
- GitHub Discussions
- Twitter
- Stack Overflow
- 🐛 Report Bugs
- 💡 Request Features
- 📧 Email Support
- 💰 Sponsor on GitHub
---