⚠️ WARNING: This application is in early Work In Progress (WIP) phase. Features may break, change, or be removed without notice. Use at your own risk.
A modern League of Legends companion application built with Tauri, React, and TypeScript. SuperLeague provides an intuitive desktop interface to interact with the League of Legends client, offering real-time summoner information, ranked statistics, and useful League of Legends tools.
SuperLeague is a desktop application that connects directly to your League of Legends client via the LCU (League Client Update) API. It provides a clean, modern interface for viewing your account information, ranked statistics, and accessing various League of Legends utilities.
- Dashboard: Overview of your current ranked status with visual rank display
- Real-time Summoner Data: Connected to the League of Legends client for live account information
- Ranked Statistics: View your Solo Queue and Flex Ranked ratings, divisions, and LP
- Player Information: Display summoner name, level, and profile information
- Progress Tracking: Monitor your ranking progression
- Community Features: Integrate with other players and tools
- League Tools: Utility tools for League of Legends players
- Frontend: React 19 with TypeScript
- UI Framework: Tauri 2 (Rust-based desktop framework)
- Styling: Tailwind CSS with PostCSS
- UI Components: Radix UI (accessible component library)
- Data Visualization: Recharts
- Routing: React Router DOM
- Build Tool: Vite
- Backend: Rust (Tauri)
.
├── src/ # Frontend TypeScript/React code
│ ├── App.tsx # Main application component
│ ├── pages/ # Page components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions and helpers
│ └── assets/ # Frontend assets
├── src-tauri/ # Tauri backend (Rust)
│ ├── src/ # Rust source code
│ ├── capabilities/ # Tauri security capabilities
│ ├── icons/ # Application icons
│ └── tauri.conf.json # Tauri configuration
├── public/ # Static public assets
├── dist/ # Built application (generated)
├── tailwind.config.js # Tailwind CSS configuration
├── vite.config.ts # Vite configuration
└── tsconfig.json # TypeScript configuration
- Node.js 16+ and npm/yarn
- Rust 1.70+ (for Tauri development)
- League of Legends Client (for LCU API connectivity)
-
Clone the repository:
git clone <repository-url> cd superleague
-
Install dependencies:
npm install
-
Set up Rust environment (if developing Tauri backend):
rustup update
npm run devThis starts the Vite dev server with hot module replacement and the Tauri development window.
npm run buildCompiles TypeScript and builds the Vite bundle for Tauri.
To run the packaged desktop application (after building):
npm run tauri -- devOr use the build preview:
npm run previewnpm run dev- Start development server with Vitenpm run build- Compile TypeScript and build with Vitenpm run preview- Preview the built applicationnpm run tauri- Run Tauri CLI commands
SuperLeague connects to the League of Legends client via the LCU API. The app automatically detects and connects to a running League client, providing real-time data about your summoner, ranked status, and more.
Note: The League of Legends client must be running for the app to connect and retrieve data.
The application is configured via src-tauri/tauri.conf.json:
- Product Name: super-league
- Version: 1.0.0
- Identifier: com.superleague.app
- Window Size: 1060x960 pixels
- Dev URL: http://127.0.0.1:1420
- Dev Port: 1420 (Vite)
- HMR Port: 1421 (Hot Module Replacement)
The project uses Tailwind CSS for styling with the following utilities:
- Tailwind CSS: Utility-first CSS framework
- PostCSS: CSS processing
- Autoprefixer: Automatic vendor prefixes
- Tailwind Merge: Smart class name merging
SuperLeague uses Radix UI components for accessible, unstyled UI primitives:
- Dialog, Dropdown Menu, Hover Card
- Select, Tabs, Tooltip
- Progress Bar, Scroll Area
- Separator, Label, Slot
- Frontend Development: Make changes in
src/- Vite will hot-reload - Tauri Backend: Modify Rust code in
src-tauri/src/and restart dev server - Build: Run
npm run buildbefore creating releases - Testing: Test the built application with
npm run preview
- Tauri Documentation
- React Documentation
- TypeScript Documentation
- Vite Documentation
- Tailwind CSS Documentation
- Radix UI Documentation
- League of Legends LCU API
This project is licensed under the GNU General Public License v3.0 - see the LICENSE file for details.
This GPL license ensures compliance with Riot's requirements for third-party League of Legends applications and guarantees that modifications and improvements remain open-source.
We welcome contributions from the community! Here's how to contribute:
- Fork the repository
- Clone your fork:
git clone https://github.com/YOUR-USERNAME/superleague.git - Create a new branch for your feature:
git checkout -b feature/my-feature - Make your changes and commit with clear messages
- Push to your branch:
git push origin feature/my-feature - Open a Pull Request with a clear description of your changes
- Describe what you're fixing or adding - Provide context for your changes
- Link related issues - Reference any issues your PR addresses
- Test your changes - Ensure the app still builds and runs correctly
- Follow the existing code style - Keep consistency with the current codebase
- Keep PRs focused - One feature or fix per PR is preferred
- Add comments if needed - Only comment code that needs clarification
If you find a bug or have a feature request, please open an issue with:
- A clear title describing the problem
- Steps to reproduce (for bugs)
- Expected vs. actual behavior
- Your system information (OS, Node/Rust versions)
Since version 1.0.0 was released with limited polish time, the following features are planned for future versions:
- Caching of user data
- Support for multiple accounts that persist during app sessions
- Active Game Minimal Data display
- Additional Fun Tools
- Complete UI/UX redesign once core functionality is stable
UI/UX Designers Wanted! If you're interested in helping design a beautiful new interface for SuperLeague, feel free to reach out on our Discord server!
For issues, questions, or suggestions, please open an issue on the repository or join our Discord community.