Onboarding Checklist

An expandable setup checklist with a real derived progress bar and a completion state.

Prominimalplayful

Category: Components
Added: 2026-09-01
Deps: 2
Updated: 2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview

Get set up

1 of 4

Link a GitHub repo so pushes trigger automatic preview deploys.

Props

Expandable rows

Requires framer-motion, lucide-react

"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { CheckCircle2, ChevronDown } from "lucide-react";

type Task = {
  id: string;
  title: string;
  detail: string;
  action: string;
  done: boolean;
};

const INITIAL: Task[] = [
  { id: "account", title: "Create your account", detail: "Verify your email so we can send deploy alerts and receipts.", action: "Resend email", done: true },
  { id: "repo", title: "Connect a repository", detail: "Link a GitHub repo so pushes trigger automatic preview deploys.", action: "Connect GitHub", done: false },
  { id: "invite", title: "Invite a teammate", detail: "Projects with 2+ members ship 3x more often in their first week.", action: "Invite by email", done: false },

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}

Notes

About this component

A checklist that's just a list of static checkmarks answers 'what's left' but not 'why should I bother' — which is exactly the question new users are silently asking at each step. This version treats every progress signal as derived state: the bar's percentage comes from counting done tasks against the total on every render rather than being set by hand, so it can never drift out of sync with the checkboxes the way a manually-tracked progress variable eventually does. Each row can expand to show the task's business rationale and a one-click action, using AnimatePresence's height animation — the non-obvious detail is that animating to height: "auto" only works cleanly in Framer Motion because the collapsed state is height: 0 with overflow hidden, not display: none, since you cannot animate to or from a non-numeric height with display toggling. Reach for this over a plain progress bar whenever onboarding has more than two or three steps and completion isn't self-evident; skip the expand/detail interaction (collapsible={false}) for a short, self-explanatory checklist where extra copy would just be friction.

Curator’s note

The completion percentage is always computed from the tasks array, never stored as its own piece of state — one derived source of truth instead of two things that can disagree.

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Pro

Multi-Step Form Flow

components

A validated wizard with per-step gating, an editable review step, and a real success state.

formwizardmulti-step

NewPro

Chapter Progress Nav

components

A sticky section nav whose items fill like progress bars as you read — and still reaches the short last section that fixed-line navs never activate.

navigationscrollsticky

Featured

Circular Progress Ring

components

An SVG progress ring whose fill and centered percentage count up together on scroll into view.

progressringsvg