Get started

2 of 5 done

2/5

Next
Invite a teammate1 min
Sites ship faster with a second pair of eyes. Send one invite and you are set.
Later
Add your first product3 min
Later
Publish your site1 min
Done
Create your workspace
Done
Connect your domain

Next Up

A setup checklist card. One job: show a new user the single next thing to do. The current step is open, later steps are collapsed, finished steps sit dimmed at the bottom. A progress ring shows how far along they are.

Dependencies

gsap@gsap/reactclsxtailwind-merge

Interaction

Sequenced single-timeline state transition with GSAP Flip DOM reordering, height morphing, and stroke dash progress updates.

Props

Prop	Type	Description
steps	NextUpStep[]	Array of setup steps with id, title, description, actionLabel, and optional duration.
title	string	Heading text displayed in the card header.
completedIds	string[]	Controlled array of completed step IDs.
defaultCompletedIds	string[]	Initial uncontrolled completed step IDs.
onStepComplete	(id: string) => void	Callback fired when a step action is clicked to complete it.
doneMessage	string	Message displayed when all checklist steps are completed.
className	string	Optional additional CSS class names for the card container.

MIT License. Free to use in personal and commercial projects. Built for Peel UI.