shadcn.io is not affiliated with official shadcn/ui
Moving Checklist Todo List Block for Vue
A house-move checklist where choosing the move date works out the start of six phases from 8 weeks before to after the move, marks the phase you are in, and pins important tasks with a star.
Installation
Overview
Count back from the day the van arrives, with this moving to-do list block for Vue with Ark UI. A Native Select in the top band picks the move date (Sat 5 Dec or Sat 12 Dec), and six phases from "8 weeks before" to "After the move" take their start dates from it ("from Sat 10 Oct"). The phase that holds the fixed day says "You are here"; with the later date today falls before the first phase, and the band says when it starts. Each phase has two tasks as Checkbox rows and its own Progress bar, and important tasks are pinned first with a star and the word "Important". The movers' number is a tel: link. Guides rule the bands. For relocation services, property apps and household planners.
FAQ
How are the phase dates worked out?
Each phase has an offset in days from the move date (for example minus 56 for the first), added with Date.UTC arithmetic and printed as "from Sat 10 Oct". Change the move date and every phase moves with it.
How does You are here work?
It marks the latest phase whose start is on or before the fixed "today". Nothing reads the clock. If no phase has started yet, the badge is hidden (its space is kept) and the top band says when the first one starts.
What does Important do?
It pins the task above the others in its phase, with a star and the word, so it does not rely on colour. Ticking a task never reorders the list.