shadcn.io is not affiliated with official shadcn/ui
Gaming Stats Profile Block for Radix UI
A player's stats worked out from twelve matches: a start cell with a drawn rank emblem and win rate, a Ranked and Casual control, and tabs for an overview, a match table and weapon usage bars with accuracy.
Installation
Overview
Show a player's record, worked out from the matches themselves, with this gaming stats profile for React with Radix UI. A compact header names the stats site and says the game and the numbers are invented. The panel opens on a cell at the start: the player, a rank emblem drawn from five greyscale shapes with the tier name and rank points, and the win rate and match count for the chosen mode. At the end a Segment Group chooses Ranked or Casual, and Tabs hold the Overview, the Matches and the Weapons. The overview gives win rate, KDA, headshot share and kills a match as figures; the matches are a table of map, result as a word with the rounds, and kills, deaths and assists; the weapons are Progress bars for each main weapon's share of matches, with its accuracy. Every figure comes from twelve typed matches, so changing the mode changes them all and the panels keep their height. The foot, ruled by Guides, holds a status line. It's built from Segment Group, Tabs, Data List, Progress, Badge, Avatar and Guides, with a CSS entrance only. For a game-stats site, a league page or any player profile.
FAQ
How do I fill it with my own matches?
Edit MATCHES. Each has an id, an ISO date, a mode, a map, the rounds for each side, the kills, deaths, assists and headshots, and the main weapon with the shots fired and shots that hit. The win rate, the KDA ((kills + assists) / deaths), the headshot share, the usage bars and the accuracy are all worked out from those rows. RANK holds the tier and points.
What does the mode control change?
It chooses which matches count. Ranked has seven and Casual five, and every figure in the start cell, the overview, the table and the weapon bars follows. The tabs keep their place and each panel holds the same height, so the page does not jump. The status line states the result, such as the wins and the KDA.
How is the rank emblem drawn?
It is a small inline SVG of five shapes in foreground weights: a shield, a diamond, a dot and two chevrons. It is decoration, hidden from assistive technology, because the tier is also written beside it. Swap the paths for your own tiers.