shadcn.io is not affiliated with official shadcn/ui
Workout Tracker Chat Block for React Aria
A trainer's thread with a set logger: pick a lift, weight and reps, log a set to post a card with its volume and a New best badge, and a This week pane that totals volume per lift and lists personal bests.
Installation
Overview
Log your sets and watch the week add up, with this workout tracker chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window for Repsmith, a lifting log: Marco Teversham is the trainer, and above the message field is a row of fields, a Native Select of six lifts, two Number Inputs for weight and reps and "Log set". Each logged set posts a card with the lift, the load, the reps and the volume in kilograms, and a set that beats the lift's best so far (typed before today, then your earlier sets) wears a "New best" Badge with a trophy. The "This week" pane at the end is derived from the same log: the day's total, a bar per lift with its volume and a list of personal bests. The Shine Button sends text to a typed script. It's the starting point for a training log, a coaching app or any chat that keeps a ledger.
FAQ
What stays in the page, and how do I make it real?
Everything. The six lifts, their previous bests and the replies are typed in the file; the sets you log live in the page only. To wire it for real, store each set where logSet runs and compute the pane from your history.
How is a personal best decided?
A pure helper compares a set's weight with the heaviest earlier set of that lift: the typed best from before today, then any set logged earlier in the thread. Only a strictly heavier set is a new best, so repeating a weight is not one, and the badge is derived per render rather than stored.
How is volume worked out?
Sets times reps times kilograms, summed per lift for the bars and across lifts for the day's total. The bars share one scale, the longest being the lift with the most volume, and the numbers sit beside them so the bars are never the only source.
Is there a rest timer or set ticking?
No. This block is a ledger of what you did, not a workout in progress.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden "Marco Teversham, 17:30" or "You, ...". Delivery is a glyph and a word, never a color. Every control is a real button, field or checkbox with a name, Enter sends and Shift and Enter add a line, and the avatars are hidden from assistive technology because names are always in text.