shadcn.io is not affiliated with official shadcn/ui
Profile Complete Success Block for Radix UI
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 Radix 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.