shadcn.io is not affiliated with official shadcn/ui
Habit Tracker Calendar Block for Vue
Three habits as tabs over a month of toggle buttons, with the current streak, best streak and rate worked out from your ticks and the strongest weekday named underneath.
Installation
Overview
Turn a month into a habit log with this habit tracker calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner holds Tabs with one trigger for each habit, each showing how many days so far it was done ("11 of 14"). The chosen habit's October is a table, Monday first, in which every day is a toggle button: the past and the fixed "now", 14 October, can be ticked and unticked, and later days are locked and say so. A strip of three figures, the current streak counted back from the fixed "now", the best streak and the share of days done, is worked out from the ticks as you make them, and a line under the month names the weekday with the most ticks. The month keeps a single tab stop and the arrow keys, Home and End, move between days. The bands are ruled by Guides. Below the small breakpoint the day buttons shrink to 36 pixels. It's built from Tabs and Guides, with a CSS entrance only. For habit apps, wellness trackers and any app that counts days in a row.
FAQ
How do I add my own habits?
Edit HABITS: each has an id, a name and ticks, the ISO days it was done. The counts in the tabs, the streaks, the rate and the strongest weekday are all worked out from those lists and from the fixed "now" in AS_OF; none of them is typed.
How is the streak counted?
It counts the days in a row that were done, back from the fixed "now". While today is still unticked the count starts from yesterday, so a streak does not drop to zero in the morning before you have had a chance to do the habit. The best streak is the longest run of ticks so far this month.
Why can't I tick later days?
A habit is something you have done, so days after the fixed "now" are locked. They stay in the tab order and say "not open yet", and pressing one only adds a message to the polite status line. Change AS_OF to move the line between past and future.
How do I move around with the keyboard?
The month is one tab stop. The arrow keys move a day or a week, Home and End go to the ends of the week, and Enter or Space ticks or unticks the day. Each button is named with its full date and is pressed when the habit was done. A polite status line says what changed and what the streak is now.