shadcn.io is not affiliated with official shadcn/ui
Athlete Performance Profile Block for React Aria
An athlete's personal-records board: a season control, an event group, and PR cards two across with the best mark, the previous best, the signed change with an arrow, the date and a five-bar progression strip.
Installation
Overview
Show what an athlete has earned, season by season, with this athlete performance profile for React with React Aria. A compact header names the training log and carries a season Segment Group, 2025 or 2026. The hairline frame under it opens on the athlete: initials, name, role and place. A toolbar band holds a second Segment Group for the event group (Strength, Speed or Endurance) and a count worked out from the records, such as "5 PRs in 2026". Under it, four cards sit two across on shared hairlines. Each gives the best mark in large figures, the signed change from the previous best with an arrow, a Data List with the previous best and the date it was set, and a strip of five bars drawn from the last five bests, the newest in solid foreground. An event with no new record in a season keeps its card and says so. The foot, ruled by Guides, holds a status line. It's built from Segment Group, Data List, Badge, Avatar and Guides, with a CSS entrance only. For a training log, a team page or any profile that keeps score.
FAQ
How do I fill it with my own marks?
Edit MARKS. Each has an id, a name, an event group, a unit (kg, sec or clock), whether a smaller number is better, and records by season. A record is an ISO date and a trail of the last five bests, oldest first; the best is the last one and the previous best the one before it. A mark with no record in a season keeps its card with the earlier best.
How are the change and the count worked out?
The change is the best minus the previous best, shown with a sign and an arrow: down for a time that got faster, up for a weight that went up. A mark with no record that season shows no change. The count in the toolbar is the number of marks with a record in the chosen season, so it follows the data. Times are stored in seconds and written as a clock or to two decimal places.
What stays in the page, and how do I make it real?
Everything. The marks are typed sample data and the two controls only change what is shown. Nothing is saved or sent. To make it real, load the records from your own training log and pass them in place of MARKS.
Is it accessible?
Both controls are labelled groups of radio-style buttons. Each card is a list item with its name as a heading, and every figure is text; the strip of bars is decoration, because the previous best and the change say the same thing in words. The status line is a polite live region present from the start.