shadcn.io is not affiliated with official shadcn/ui
Profile Complete Success Block for React
A page for a freelancer profile that reached 100%: a progress ring around an initials avatar, a Verified badge, six ticked profile sections with a detail each, and profile views before and since.
Installation
Overview
Close the loop on a finished profile with this confirmation page for React with Base UI. It is the page Craftroll, a freelancer network, shows when a profile hits 100% complete: the page's side rails and one band frame it, split in two with the message first. The message has the heading, one sentence, two facts (profile views the week before and this week) and the Shine Button, View public profile. The other cell is the profile as a card: a Circular Progress ring drawn around an initials Avatar, the name and headline, an outline Badge that says Verified, and the six sections (photo, headline, skills, work history, links, identity) as ticked rows. For marketplaces, networks and any product with a completeness score.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was published or verified. The person, the six sections and the two view counts are typed data. To wire it, build SECTIONS from the profile's own checks, read the views from your analytics, and point the button at the public profile. The ring and the heading's percentage come from how many sections are done.
What does the ring show, and what does a reader hear?
The share of sections done: six of six is 100%. The ring and the avatar are decoration, hidden from assistive technology; the heading says the profile is complete, and the list reads each section as done or not done, with "6 of 6 sections done" under it.
Are the view counts a promise?
No. They are two typed numbers, labelled as the week before and this week with the difference worked out. Do not show a comparison like this unless your own data supports it.
How does it look on a phone?
The message comes first, then the profile card with the ring above the list. The one-line detail beside each section is hidden to shorten the page, and each row still reads its name and state.
Related
- Pro
A page for a finished workspace setup: a full progress bar over five ticked steps with their dates, three launch rows for what to do next, and a quiet fall of confetti that stops with reduced motion.
- Pro
Account Setup Checklist Success
Account lifecycleA welcome page after sign-up: what happened, then a five-task setup checklist in an accordion where one task is open at a time, each with its own control, a count and a progress bar, and one primary that opens the app.
- Pro
Profile Setup Onboarding
Profile and accountA profile step for a creator site: name, what you do, pronouns and a bio with a count in a form, and beside it the card others will see, redrawn on every keystroke, with the profile address worked out from the name.
- Pro
A page for a passed certification exam: a drawn certificate sheet with a Passed stamp that lands once, the 98% score in a ring, a button that copies the verification link and one that downloads a text record of the credential.
- Pro
First Project Success
Account lifecycleA confirmation page for a first project: the new project as three facts, four firsts in a grid of hairline cells with the next one lit and each pickable to read what it takes, one Open the project button and a thin fall of confetti that plays once.
- Pro
Two-Factor Recovery Codes Success
Security and accessA two-step sign-in confirmation page: what was turned on, eight single-use recovery codes in a framed sheet with copy and download, and a Finish setup button that stays dimmed until you tick that you saved them.