shadcn.io is not affiliated with official shadcn/ui
Profile Setup Onboarding Block for Vue
A 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.
Installation
Overview
Let people see their profile take shape while they write it, with this profile step for Vue with Ark UI. It's the second step of Handleby, a creator profile site: the page's side rails run its full height and one band crosses the screen between two rules, split in two. The first half has the step header (the product's mark, “Step 2 of 5” and a hairline of progress), the heading and a form: a full name and what you do in Inputs, pronouns in a Native Select, and a bio in a Textarea with a count that turns spoken only as it runs low. Each field is checked when you leave it. The second half is the card others will see, redrawn on every keystroke: initials in an Avatar, name, role, pronouns, bio, the profile address worked out from the name, and the month you joined. Save profile is the only colored control, a Shine Button, with Skip for now beside it. Nothing is saved or published. For sign-up flows, creator sites and any profile step.
FAQ
How does the card follow the form?
The card reads the same state as the fields: name, role, pronouns and bio are typed into one object and the card is drawn from it, with a stand-in in place of anything still empty. The profile address is the name in lowercase with hyphens between words, so “Linnea Okoro” becomes handleby.example/linnea-okoro. The Joined month is typed, since this page has no account to read it from.
When are the fields checked?
When you leave a field, and for all of them when you press Save profile. A name needs two characters, what you do can't be empty and the bio can't pass 160. The problem shows under its field with an icon, in a line that is always reserved, so nothing moves; Save with a problem puts focus on the first one and says so in the status. Typing in a field with a problem clears it once it's fixed.
How does the bio's count work?
The count beside the field is for the eye and hidden from screen readers; while you type, the status speaks it only when it matters: at 20 characters to go, at 10, at none and when you're over. Going over doesn't cut your text: it is a problem to fix, with its amount, when you leave the field.
Why initials and not a photo?
Uploading, cropping and storing an image is its own step: the avatar upload block does it with a real crop. This one draws the person's initials, which is also what the profile shows until they add a photo.
What happens when I press Save profile?
Nothing leaves the page: a status line under the form says saved in this demo and that nothing was sent. In your app post the values to your server in submit where it says so, show its reasons under the fields it names, and keep the card as the preview of what was accepted. Skip for now says skipped in this demo and keeps what you typed.