shadcn.io is not affiliated with official shadcn/ui
Habit Board Kanban Block for Svelte
A Monday to Friday board of twelve weekly habits where a round check ticks a habit, the week streak is worked out from the ticks, and a day that has not started cannot be ticked.
Installation
Overview
Keep a run of good weeks going with this habit board for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds five weekday columns and twelve weekly habits, each scheduled for the day it is done, and the board is read on Wednesday 14 October 2026 so the first three days have passed. The round Checkbox on a card ticks the habit, and its streak is worked out from the ticks: a tick adds a week, a day that passed without one resets the streak ("Streak reset"), and a habit cannot be ticked on a day that has not started, which the status line says in words. Each column head counts its ticks, and the sentence under the heading adds up the ticks, the resets and the longest streak. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to". A polite status line reports each change and Reset restores the week. On a phone the columns scroll sideways in one named region. For habit trackers, routines and any weekly rhythm.
FAQ
How do I fill it with my own habits?
Edit COLUMNS, TODAY_AT and START. A habit has an id, the column (day) it is done on, a title, a done flag and a base, the weeks in a row it had been ticked before this week. The streak, the ticks per column and the header sentence are calculated from those.
How is the streak worked out?
streakOf reads the card: ticked means base plus one week, unticked on a day that has passed means zero, and unticked today or ahead keeps base. Nothing is stored, so unticking, moving a habit to an earlier day or Reset all change it at once. Replace it to count days, or to forgive one miss.
Why can't I tick Thursday?
The board is read on Wednesday, so Thursday and Friday have not started and a tick there is refused with a line in the status. A ticked habit also can't be moved to a day that has not started until it is unticked, which stops a streak being earned in advance. Change TODAY_AT to move the day the board is read on.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, the arrow keys move it (left and right change column and swap in right-to-left languages, up and down change its place), Space drops it and Escape puts it back. Each step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card and says so in the status line.
What stays in the demo, and how do I save the ticks?
Everything: ticks and moves live in the component's state, nothing is saved or synced, and a reload or Reset restores the starting week. To keep them, post to your API from act (the tick) and put (the move) and read the streak back from the response. The habits are made up.