VersusUI is a sleek and customizable React overlay component designed for competitive streams and recordings. It allows you to display player or team names alongside a live-updating score counter, perfect for 1v1 matches, tournaments, or any head-to-head content.
- 📺 Clean and responsive UI for OBS or any streaming software
- 📝 Editable player/team names
- 🔢 Real-time score counters
- 🎨 Easy to style and theme
- ⚛️ Built with React + modern frontend practices
The clean, default layout of VersusUI – perfect for any competitive stream! 🎮✨
Customize team names and scores easily! 🎯 Plus, text is resizable for perfect visibility. 🔥
Quickly switch between 4 built-in color themes using keys 1–4 on your keyboard, or press 0 to reset to the default. 🖌️🎉
More palettes coming soon!
- Click on the team name directly in the overlay.
- You can type the team or player name, with a maximum of 30 characters.
- To increase the score, left-click on the score counter.
- To decrease the score, right-click on the score counter.
- You can now also scroll up to increase and scroll down to decrease the score using the mouse wheel.
- Keyboard shortcuts to control the score:
- Q to decrease the left team's score.
- E to increase the left team's score.
- A to decrease the right team's score.
- D to increase the right team's score.
- You can select a color palette by pressing the keys 1 to 4 on your keyboard.
- Press 0 to return to the default color palette.
- Add as a Browser Source in OBS
- Copy the URL link of VersusUI.
- In OBS, add a new source of type "Browser".
- Paste the URL you copied into the URL field of the Browser Source.
- Set the resolution of the source to 1280x200px to fit the layout properly.
- To interact with the overlay (e.g., type team names), right-click the Browser Source in OBS and select "Interact". This opens an interactive window where you can type or click as needed. 🖱️⌨️
Stay tuned for updates!