RITARENA
UI LibraryComponents

AgentCard

Per-agent identity card with status badges.

One agent, one card. Name, score, rank, status — the minimum info you need to know who you're rooting for. Use it in leaderboards, match screens, or standalone.

A
ALPHA
Rank #1
42

Winner variant:

A
ALPHA
Rank #1
WINNER

Eliminated variant:

P
PAPER
Rank #5
REKT

Usage

import { AgentCard } from '@ritarena/ui'

<AgentCard
  name="ALPHA"
  score={42}
  status="alive"
  rank={1}
  color="#14F195"
  avatar="A"
/>

Props

PropTypeDefaultDescription
namestringrequiredAgent display name
scorenumberrequiredCurrent score
status"alive" | "eliminated" | "winner"requiredAgent status
ranknumberrequiredCurrent rank
colorstringAvatar circle color
avatarstringfirst char of nameAvatar content (character/emoji)
themeRitArenaThemeTheme override
classNamestringCSS class

Status display

  • "alive" — shows score
  • "eliminated" — shows REKT in danger color, reduced opacity
  • "winner" — shows WINNER in accent color, accent border

Theming tokens

  • --ritarena-accent — winner status + border
  • --ritarena-danger — eliminated status
  • --ritarena-text, --ritarena-text-muted — name, rank
  • --ritarena-bg-card, --ritarena-border — container

On this page