+```
+
+## Breaking Changes
+
+1. **No Vuetify**: All Vuetify components have been replaced with custom styled components
+2. **No Vue Router**: Single page application, routing removed
+3. **No Pinia**: Replaced with Zustand
+4. **TypeScript**: All new components use TypeScript
+5. **Build Tool**: Still using Vite but configured for React
+
+## Non-Breaking Changes
+
+✅ **Backend API**: No changes, fully compatible
+✅ **Services**: All service files unchanged
+✅ **Utilities**: All utility functions unchanged
+✅ **WebSocket Protocol**: Same protocol, same message format
+✅ **Scrcpy Libraries**: Same @yume-chan libraries
+
+## Benefits of React Migration
+
+1. **Better TypeScript Support**: React + TypeScript provides excellent type safety
+2. **Simpler State Management**: Zustand is lightweight and easier to use than Pinia
+3. **Component Reusability**: Easier to import as a library in other projects
+4. **Performance**: React's virtual DOM and hooks provide great performance
+5. **Community**: Larger ecosystem and community support
+6. **Modern Stack**: Aligns with current industry trends
+
+## Development Workflow
+
+**Vue:**
+```bash
+pnpm dev # Start dev server
+pnpm build # Build for production
+```
+
+**React:**
+```bash
+pnpm dev # Start dev server
+pnpm build # Build for production (includes TypeScript compilation)
+```
+
+## Testing
+
+The React version maintains the same functionality:
+
+1. ✅ WebSocket streaming
+2. ✅ Touch and keyboard input
+3. ✅ Audio/video codec selection
+4. ✅ Device controls
+5. ✅ File management
+6. ✅ APK installation
+
+## Common Pitfalls
+
+### 1. State Updates
+**Vue:** Direct mutation with `.value`
+**React:** Must use setter functions
+
+### 2. Side Effects
+**Vue:** `watch()` or `watchEffect()`
+**React:** `useEffect()`
+
+### 3. Computed Values
+**Vue:** `computed()`
+**React:** `useMemo()` or derived state
+
+### 4. Component Communication
+**Vue:** `emit()` and props
+**React:** Callbacks and props (same pattern)
+
+## Additional Resources
+
+- [React Documentation](https://react.dev)
+- [Zustand Documentation](https://github.com/pmndrs/zustand)
+- [TypeScript Documentation](https://www.typescriptlang.org/)
+- [Vite Documentation](https://vitejs.dev)
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 50b30e0..43164c8 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -1,44 +1,93 @@
-# default
+# SCWS React UI
+
+This is the React+TypeScript UI package for SCWS (ScrCpy WebSocket Streaming).
## Project setup
-```
-# yarn
-yarn
+```bash
+# Using pnpm (recommended)
+pnpm install
-# npm
+# Using npm
npm install
-# pnpm
-pnpm install
+# Using yarn
+yarn
```
-### Compiles and hot-reloads for development
+## Development
-```
-# yarn
-yarn dev
+To start the development server with hot-reload:
-# npm
+```bash
+# Using pnpm
+pnpm dev
+
+# Using npm
npm run dev
-# pnpm
-pnpm dev
+# Using yarn
+yarn dev
```
-### Compiles and minifies for production
+The development server will start at http://localhost:3000/
-```
-# yarn
-yarn build
+## Production Build
-# npm
-npm run build
+To compile and minify for production:
-# pnpm
+```bash
+# Using pnpm
pnpm build
+
+# Using npm
+npm run build
+
+# Using yarn
+yarn build
```
-### Customize configuration
+## Preview Production Build
+
+To preview the production build:
+
+```bash
+# Using pnpm
+pnpm preview
+
+# Using npm
+npm run preview
+
+# Using yarn
+yarn preview
+```
+
+## Technology Stack
+
+- **React** 18.3 - UI framework
+- **TypeScript** 5.7 - Type safety
+- **Vite** 5.4 - Build tool and dev server
+- **Zustand** 4.5 - State management
+- **Scrcpy Libraries** - Android device streaming
+
+## Features
+
+- Android device streaming via WebSocket
+- Device control (touch, keyboard, rotation)
+- Audio/video codec selection
+- File upload and management
+- APK installation
+- Multiple device support
+
+## Configuration
+
+The UI connects to the backend WebSocket server. Configure the backend URL in your environment:
+
+```bash
+VITE_BACKEND_WS_URL=ws://localhost:8080
+```
+
+## Backend Compatibility
+
+This React UI is fully compatible with the existing Node.js backend server. No changes to the backend are required.
-See [Configuration Reference](https://vitejs.dev/config/).
diff --git a/packages/ui/USAGE.md b/packages/ui/USAGE.md
new file mode 100644
index 0000000..f8582e7
--- /dev/null
+++ b/packages/ui/USAGE.md
@@ -0,0 +1,151 @@
+# Using SCWS React UI as a Library
+
+The SCWS React UI can be imported and used as a component in other React projects.
+
+## Installation
+
+```bash
+# Using npm
+npm install @scrcpy-streaming/ui
+
+# Using pnpm
+pnpm add @scrcpy-streaming/ui
+
+# Using yarn
+yarn add @scrcpy-streaming/ui
+```
+
+## Basic Usage
+
+```tsx
+import React from 'react';
+import { Home } from '@scrcpy-streaming/ui';
+
+function App() {
+ return (
+
+
My Android Streaming App
+
+
+ );
+}
+
+export default App;
+```
+
+## Advanced Usage with State Management
+
+You can also use the exported stores for more control:
+
+```tsx
+import React from 'react';
+import { Home, useAdbStore, useFileStore } from '@scrcpy-streaming/ui';
+
+function App() {
+ const adbStore = useAdbStore();
+ const fileStore = useFileStore();
+
+ React.useEffect(() => {
+ // Initialize the stores
+ adbStore.metainfo();
+ fileStore.getUplaods();
+ fileStore.getApps();
+ }, []);
+
+ return (
+
+
My Android Streaming App
+
Connected to device: {adbStore.device}
+
+
+ );
+}
+
+export default App;
+```
+
+## Using Services Directly
+
+You can also use the services directly without the UI:
+
+```tsx
+import { adbService, streamingService } from '@scrcpy-streaming/ui';
+
+// Get device metadata
+const metadata = await adbService.metainfo();
+
+// Start streaming
+const ws = await streamingService.init({
+ device: 'device-serial',
+ audio: true,
+ video: true,
+ maxFps: 60,
+ videoBitRate: 8,
+ // ... other options
+});
+```
+
+## Configuration
+
+Set the backend WebSocket URL via environment variable:
+
+```bash
+VITE_BACKEND_WS_URL=ws://your-backend-url:8080
+```
+
+Or create a `.env` file:
+
+```env
+VITE_BACKEND_WS_URL=ws://localhost:8080
+```
+
+## Backend Requirements
+
+The React UI requires a compatible backend server. The backend should:
+
+1. Expose a WebSocket endpoint for streaming
+2. Provide REST API endpoints for:
+ - `/adb/metainfo` - Get device information
+ - `/file/upload` - Upload APK files
+ - `/file/get-uploads` - List uploaded files
+ - `/file/get-apps` - List available apps
+ - `/adb/install` - Install APK on device
+ - `/adb/start` - Start an app on device
+
+The backend is available in the `@scws/api` package.
+
+## TypeScript Support
+
+The package includes TypeScript definitions. All exports are fully typed:
+
+```tsx
+import type { Device, Encoder } from '@scrcpy-streaming/ui';
+```
+
+## Examples
+
+### Custom Styling
+
+Wrap the component with your own styles:
+
+```tsx
+
+
+
+```
+
+### Fullscreen Mode
+
+The Home component includes a fullscreen button that uses the browser's Fullscreen API.
+
+## Browser Compatibility
+
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+
+WebCodecs API support is required for H264/H265/AV1 video decoding.
+
+## License
+
+See the main repository LICENSE file.
diff --git a/packages/ui/index.html b/packages/ui/index.html
index f3e2162..a1e5e1f 100644
--- a/packages/ui/index.html
+++ b/packages/ui/index.html
@@ -9,6 +9,6 @@
-
+