Stepper
A multi-step progress stepper with an animated connecting line and spring checks.
Onboarding
Set up your workspace
Step 1 of 4
0% complete
1
Account
Your details
2
Plan
Pick a tier
3
Payment
Billing info
4
Done
All set
Create your account
Add your name and work email to get started. We will send a verification link before the next step.
Usage: paste this file into your project (e.g.
components/stepper.tsx), make sure framer-motion, clsx and tailwind-merge are installed, and add the cn() helper from the docs.