asafefe.dev

Onboarding Checklist

New

A setup card with a segmented progress bar, steps that draw their check and strike through, and a small pixel burst once everything is done.

motionlucide-reactutils@soultel/use-reduced-motion-safe

Set up Acme Bakery

2 of 5 done

  • Get paid out every week. Takes about two minutes.

Installation

$ pnpm dlx shadcn@latest add @soultel/onboarding-checklist

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/onboarding-checklist.json works too.

Manual installation
  1. 1. Install the dependencies.
    terminal1 lines
    npm install motion lucide-react
  2. 2. Copy the source from the Code tab into components/onboarding-checklist.tsx.

Usage

example.tsx16 lines
import { OnboardingChecklist } from "@/components/onboarding-checklist"

export function Setup({ done }: { done: string[] }) {
  return (
    <OnboardingChecklist
      title="Set up your store"
      defaultCompleted={done}
      steps={[
        { id: "profile", title: "Add your logo", action: { label: "Upload logo", href: "/settings/brand" } },
        { id: "payments", title: "Connect payments", description: "Get paid out every week." },
        { id: "product", title: "Add a first product" },
      ]}
      onCompletedChange={(ids) => saveProgress(ids)}
    />
  )
}

Props

PropTypeDefaultDescription
stepsChecklistStep[]-id, title, description, and an optional action { label, onClick, href }.
completed / defaultCompletedstring[]-Controlled or initial done ids, with onCompletedChange.
collapsed / defaultCollapsedboolean-Fold the card down to its header, with onCollapsedChange.
onDismiss() => void-Shows a close button.
titlestring"Get started"Card heading.
doneTitle / doneDescriptionstring-Copy for the finished state.