shadcn.io is not affiliated with official shadcn/ui
Onboarding Checklist Team Block for Vue
One person's setup list at a security-awareness company: a ring that fills as tasks are ticked, a Next up band, and fourteen tasks in three collapsible groups, each task with a due tag.
Installation
Overview
A setup checklist for Vue with Ark UI, for Hollinsett, a security-awareness tool, written as a page about one new person: Lars's first two weeks. At the end of the header a ring fills as tasks are ticked, with "8 of 14 tasks done" beside it (under the header on a phone). A Next up band under a rule with + marks shows the first task still to do. Under it, three groups (Accounts, People, Tools) are cells apart with overshoot lines at the corners; each is a collapsible section with its own count, its tasks real checkboxes, and a due tag ("Day 1", "Week 2") under each. Tick a task and the ring, the counts and Next up follow. Nothing is saved: the list is for this visit. On a phone the groups are bands. It's built from Collapsible, Checkbox, Circular Progress, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For onboarding pages and welcome emails' landing pages.
FAQ
How do I change the groups and tasks?
Edit GROUPS at the top of the file: each group has an id, a name and its tasks (an id, a label and a due such as "Day 2" or "Week 1"). START lists the ids ticked on load. The totals, the ring, each group's count and the Next up band are counted from that data; Next up is the first unticked task in reading order. Every task's id must be unique across groups.
How is the ring read by a screen reader?
The ring is a drawing and is hidden from assistive technology; the sentence beside it ("8 of 14 tasks done") is a status region and is what is read when a task changes. The Next up band is a polite live region too, so ticking the task it names announces the next one. The ring's colour is a foreground weight, not the primary colour.
Is anything saved?
No. Ticks live in the page's memory only, and the header says so. A reload starts again from the eight tasks ticked on load. To keep progress, store the ticked ids in your own app and pass them in as START.
What do the group sections do?
Each group heading is a button inside an h3: it says whether the group is expanded, and Enter or Space folds it. Folding hides only its tasks; its count stays. Ticks survive folding.
A folded group's tasks stay in the markup, hidden, so they can't be tabbed to or read.
How does it fit on a phone?
The ring and its count sit under the title. Next up becomes a stacked band that keeps room for a two-line task, so ticking never moves what is below. The three groups become full-width bands under rules with + marks, and a task's due tag sits under its label. Nothing scrolls sideways at 320 pixels.