shadcn.io is not affiliated with official shadcn/ui
Onboarding Task List Block for Ark UI
A new-hire checklist in Day 1, Week 1 and Month 1 phases whose due dates come from a start date select, with owner filters, per-phase progress and overdue labels.
Installation
Overview
Plan a new hire's first month, with this onboarding to-do list block for React with Ark UI. An aside at the start holds a Start date Native Select (Mon 12 Oct, Mon 19 Oct or Mon 2 Nov), a sentence worked out from it against a fixed date ("Day 3 of week 1" or "Starts in 5 days"), overall progress and an Owner filter (All, IT, Manager, Buddy, People) built from pressed Buttons. The checklist is three phase bands with their own count and bar. Each item has a Checkbox, an owner Badge and a due label worked out from the start date plus its offset: "Due today", "Due in 2 days" or "Overdue 1 day", with the date beside it. Choosing another start re-labels every item and keeps your ticks; filtering by owner keeps each band's height. Guides rule the aside and the bands, which stack on a phone. For HR checklists, team handbooks and any list whose deadlines move with one date.
FAQ
How are the due dates worked out?
Each item has an offset in days after the start. dueOf adds it to the chosen start date with UTC arithmetic, and statusOf compares the result with one fixed AS_OF (Wed 14 Oct). A start in the future makes every open item "Due in N days".
What does the aside sentence say?
If the start is after AS_OF it says "Starts in 5 days"; otherwise "Day N of week W", counted in calendar days from the start. The overdue count beside it is worked out from the items, not typed.
What does the owner filter do?
It hides items that belong to other owners and keeps every band the same height, with a message when a phase has none for that owner. Pressing the active owner again returns to All. The counts show how many items each owner has in total.