shadcn.io is not affiliated with official shadcn/ui
Week Strip Sidebar Block for Ark UI
A training app in a fixed-height slim window: the sidebar holds a ring for today's goal and a week strip of seven weekday buttons with a check on finished days, choosing a day changes the workout list, and Log workout raises the ring.
Installation
Overview
Make the week the navigation with this fitness app sidebar for React with Ark UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar of thirteen rem. At its top is today's goal as a Circular Progress ring with the words "3 of 4 workouts", and under it a week strip: a Toggle Group of seven weekday buttons, M to S, with a check on every day whose workouts are all logged. Choosing a day swaps the page's workout list for that day, and Sunday is a rest day with an empty state. Log workout in the top bar logs today's next workout, which raises the ring and the week's totals; once today is complete the same button reads Reset today. Folded to icons the rail keeps the ring and a column of weekday buttons, and on a phone it is a sheet. It's built from Sidebar, Circular Progress, Toggle Group, Empty, Shine Button, Avatar and Guides, with a CSS entrance only. For training plans, habit trackers, meal plans and any week you step through a day at a time.
FAQ
How does the week strip work?
It is a single-choice Toggle Group, so one day is always chosen and the arrow keys move between days. Each button is named with its day and state, such as "Wednesday, 3 of 4 logged" or "Monday, all workouts logged", and a day with everything logged shows a check in a slot that is always reserved, so the buttons never change size.
What does Log workout change?
Today, always, whichever day you are looking at: it logs the next workout in Wednesday's list, opens that day, raises the ring and the "Week so far" totals, and says which workout was logged in the status line. The ring and the totals are worked out from the logged counts, so they cannot drift apart.
What happens on a rest day?
Sunday has no workouts, so the page shows the catalog Empty with a bed icon, the words "Rest day" and a Go to today button. It is the same kind of region as the list, so choosing it does not change the window's height.
Why are there no dates?
The week is typed by weekday name only and Wednesday is treated as today, so the demo reads the same on any day. In your app, derive the strip from the current week and send each logged workout to your API.
What stays in the page, and how do I connect it?
Everything. The week's workouts are typed in DAYS with how many were logged at load, and logging lives only in the block's state. The block sets persist={false} and shortcut={false}, so it writes no cookie and leaves Ctrl and Command with B to the page it sits on. To connect it, load the week's plan and logs from your API and save a log when the button is pressed.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The ring and the week strip are inside it, so choosing a day closes the sheet and shows that day's list. Choosing a page closes the sheet and puts focus back on the button, and the status line under the page says what changed.