shadcn.io is not affiliated with official shadcn/ui
Profile Completion Account Block for Radix UI
How complete a profile is by section: a derived percent over a segmented bar, four sections that open one at a time to their items, and a Not applicable that counts as done and can be undone.
Installation
Overview
Show people what is missing from their account, and let them say what does not apply, with this completion panel for React with Radix UI. A hairline frame with a plus mark on each corner holds a band that states the percent in figures ("67% complete", "8 of 12 items") over a segmented Progress bar of the twelve items, then four sections (Basics, Contact, Security, Preferences), each with a small bar and "2 of 3", opening one at a time in an Accordion to its three items. Each item is done, to do or not applicable: the action does it, and Not applicable is for what does not fit you ("I do not have a phone"), counts as done and can be undone like any other mark. The percent is derived from the marks, never typed. The header's Shine Button, Do the next one, opens the section of the first item still to do and focuses its button. It's built from Accordion, Progress, Badge, Button, Shine Button and Guides, with a CSS entrance only. There are no points or rewards. For the account page of any app with a profile worth finishing.
FAQ
How do I fill it with my own sections?
Edit SECTIONS: each has an id, a title and its items, and each item has a title, a hint, the label of its action and, only if it can apply to someone, the words of its na. START holds the marks the page opens with. The counts, the bars and the percent are worked out from the marks by countOf and percentOf; add or remove an item and every number follows. Keep every section at the same number of items, or the open section changes the panel's height.
How does Not applicable work?
It marks the item done in a different word: the tick turns into a bar, the row says "Not applicable: I do not have a phone." and it counts toward the percent, so nobody is nagged for something that cannot apply. Undo puts it back on the list. Items that always apply, such as turning on two-factor, offer no such button. The status line says what changed and the new percent.
What does Do the next one do?
It finds the first item still to do, opens its section (closing the other, since one is open at a time) and moves focus to its action button. When nothing is left the button reads "All done" and, if pressed, says in the status line that there is nothing to do. It never completes an item for you.
What stays local, and how do I make it real?
Everything: pressing an action only marks the item done in this page, and the status line says so. To make it real, make each action take the person to the real setting (or open its dialog), and mark the item only from your server's own state; keep Not applicable as a stored choice so it survives a reload.
Is it accessible, and how does it look on a phone?
The sections are headings that open and close their items, the open one is announced as expanded, each button says which item it is for ("Add a number: Add a phone number"), the bar is named with the percent, and the status line is a polite live region present from the start. Each section's body keeps one height, so opening another never moves the page. On a phone every item stacks its buttons under its words.