shadcn.io is not affiliated with official shadcn/ui
Fitness Tracker Profile Block for Ark UI
A fitness profile read a day at a time: a seven-day strip, four goal tiles with bars for steps, calories, distance and active minutes, that day's workouts with a type icon and duration, and week totals worked out from the days.
Installation
Overview
Show a member's week and let a visitor read it a day at a time, with this fitness tracker profile for React with Ark UI. A compact header says the figures are sample data, not advice, and the hairline frame under it opens on the member: initials, name, role and place. A band holds the week: a Toggle Group of seven days, Monday to Sunday, each showing its step count, that scrolls sideways on a phone, and one line of totals worked out from the days. The chosen day opens four tiles on shared hairlines (steps, active calories, distance and active minutes), each with a Progress bar toward its goal and the share in words, then that day's workouts with a type icon and a duration. A rest day shows an Empty state in the same space, so nothing below it moves. The foot, ruled by Guides, holds a status line that says how many of the four goals the day met. It's built from Toggle Group, Progress, Empty, Badge, Avatar and Guides, with a CSS entrance only. For a fitness app, a club member page or any profile that tracks a body over a week.
FAQ
How do I fill it with my own week?
Edit the constants at the top. GOALS holds the four daily goals. DAYS lists the seven days: each has an ISO date, its steps, calories, distance in kilometres and minutes, and its workouts, each with a type, a name and a duration in minutes. A day with no workouts is a rest day. The totals, the shares, the tab figures and the goals-met count are all worked out from those rows, so nothing is typed twice.
What counts as a goal met?
A goal is met when the day's figure reaches the goal: 10,000 steps, 500 active calories, 8 km or 45 active minutes. The bar and the share in words both stop at 100 percent. The heading of the day says how many of the four were met, and the status line repeats it when you pick a day.
What stays in the page, and how do I make it real?
Everything. The week is typed sample data, picking a day only changes what is shown, and nothing is sent or saved. To make it real, load each day from your own activity API and pass it in place of DAYS. Health and fitness figures here are examples, never advice or a diagnosis.