User Profile 11 - Profile completion checklistPro
A card showing how complete a user's profile is with a progress bar, percentage and checklist of steps that can be marked done to advance the bar. Use it in onboarding flows or dashboards to nudge users to finish setting up their account.
About User Profile 11
A card showing how complete a user's profile is with a progress bar, percentage and checklist of steps that can be marked done to advance the bar. Use it in onboarding flows or dashboards to nudge users to finish setting up their account.
User Profile 11 is a user profile block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 111 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- completion
- progress
- checklist
- onboarding
- setup
- gamification
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add user-profile-11Dependencies installed automatically: lucide-react, motion.
Uses: avatar, button, progress, reveal, utils.
Usage
import UserProfile11 from "@/components/blocks/user-profile-11"
export default function Page() {
return <UserProfile11 />
}