Onboarding Checklist
A getting-started card with a progress ring and a rolling counter, expandable steps with a primary action, a check that draws with a burst of sparks, completed steps that strike through and collapse, and a celebratory all-done state with a dismiss.
DOM + CSS0 deps1 file · 24 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState } from "react";
import type { CSSProperties, KeyboardEvent, PointerEvent } from "react";
export type OnboardingTask = {
id: string;
title: string;
detail: string;
action: string;
/** Initial completion when `defaultCompleted` is not given. */
done?: boolean;
};
export type OnboardingChecklistProps = {
/** Expandable rows with a description and a primary action. Off = a flat checklist. */
collapsible?: boolean;
tasks?: OnboardingTask[];
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
A getting-started card in the style of the best product dashboards. The header is a progress ring whose arc eases to the new fraction in 800ms while the count inside rolls like an odometer; beside it the card names what is next. Each open step shows a short reason and one primary action. Pressing the action, or the round check, draws the tick in 340ms and fires six small sparks, then the title strikes through with a line that grows from the left, the row collapses and the next unfinished step opens with focus on its title. Finishing the last step swaps the list for a celebratory state: a large check that pops and draws, a ring pulse and twelve sparks, with Dismiss and Reopen last step. Dismiss leaves a small Show setup guide pill so the card is never lost. State is derived: progress comes from counting completed ids against the tasks, never stored twice. Pass completed and onCompletedChange to persist it in your own store, or leave it uncontrolled. Set collapsible to false for a flat checklist where the row toggles itself. The card has a pointer-following light on hover and the accent is a prop. Caveat: the actions only mark steps done; wire onAction to do the real work. No dependencies.
Curator’s note
Rebuilt in October with a progress ring, a rolling counter and a check that draws with sparks. Progress is derived from the completed ids, and the checklist can be controlled so your own store owns persistence.