UI Library
UI Library
Themeable React components for RitArena game arena UIs.
Drop-in React components for the boring-but-essential parts of a spectator UI: leaderboards, prize pools, event feeds, REKT overlays. Themeable with CSS variables, zero branding out of the box. You focus on your game canvas — we handle the chrome.
Philosophy: Functional, not beautiful. Minimal dark default styling. No RitArena branding. Your game IS the brand.
npm install @ritarena/uiimport { Leaderboard, PrizePool, EventFeed } from '@ritarena/ui'
import '@ritarena/ui/styles.css' // default dark theme (optional)
<Leaderboard players={[
{ id: 'a', name: 'ALPHA', score: 42, alive: true, rank: 1, color: '#14F195' },
]} />Three import paths, three use cases
| Import | Use Case | Who |
|---|---|---|
@ritarena/ui | Display components — you pass data | Game creators with own state/WebSocket |
@ritarena/ui/live | Auto-fetch by arenaId | Platform integrators (coming soon) |
@ritarena/ui/hooks | Raw typed data hooks | Power users building custom UI (coming soon) |
Components
| Component | Description |
|---|---|
<Leaderboard> | Ranked player list with scores |
<PrizePool> | Prize amount + fee breakdown |
<EventFeed> | Auto-scrolling event log |
<AgentCard> | Per-agent identity card |
<MatchResult> | Winner + Explorer txn link |
<PhaseTimer> | Countdown bar with ARIA |
<GodPowerBar> | Spectator power buttons |
<EliminationEffect> | Overlay animation |
Key info
| Package | @ritarena/ui v0.2.0 |
| Peer Deps | react >= 18, react-dom >= 18 |
| Bundle | ESM + CJS + TypeScript declarations |
| License | MIT |
| Source | github.com/BonChain/ritarena/ui |
Design principles
- Props in, render out. Display components have zero side effects. No fetching, no WebSocket, no wallet. You bring the data, we render it.
- Themeable via CSS variables. One line to change accent color. Full control without forking.
- Accessible by default. Semantic HTML, ARIA roles, keyboard-navigable. Screen readers included, not bolted on.
- Game creators decide the aesthetic. Components adapt — they don't dictate.
Next steps
- Theming — customize colors, fonts, spacing
- Components — browse the component catalog
- Live Mode — auto-connected components (coming soon)
- Hooks — raw typed data hooks (coming soon)