Onboarding checklist
The getting-started checklist a new account sees first: tick a step and the next one opens, and finishing the last folds the whole card into a small "All set" pill.
- Create your project
- Invite your team
- Connect a domainPoint your DNS at us. It takes about two minutes.
- Add billing
- Ship your first deploy
Things to try
- Tick a step. The next one opens in place while the finished one settles back, and the ring fills as you go.
- Finish the last step. The whole card folds down into a small "All set" pill that stays out of your way.
- Hide it early. The pill remembers how far you got; open it to bring the card back.
Install
npx shadcn@latest add https://your-docs-site/r/onboarding-checklist.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- Card to pill. The card and the pill are two different pieces of markup, so Morph animates the change: it pairs the ring, the title and the count across both shapes, with no ids.
- The ring and the ticks are Motion; the checkboxes are Base UI's Checkbox.
Feedback prompt
A "Was this helpful?" pill that opens in place. Your thumb flies into the corner as the pill grows into a small card with quick reasons and room to say more, then the card draws back into a thank-you.
One-time code
A sign-in card where code cells fold into verifying, error and verified states.