shadcn.io is not affiliated with official shadcn/ui
Account Settings CRUD Block for Vue
A budgeting app's profile card that reads first and edits all at once: change name, email, currency, week start and bio, see the changes listed in words, then save, discard or restore defaults with Undo.
Installation
Overview
Let people read their profile first and change it deliberately with this account settings card for Vue with Ark UI. Read mode is a list of five facts (display name, email, currency, week start and bio) with one Edit button. Edit turns every fact into a field: an Input for name and email, a Native Select for the currency, three choices for the week start and a Textarea with a count out of 160. Under the fields a Changes list says what is different in words, such as "Display name: Nora to Nora K.", or "No changes yet". Save changes is the one Shine Button and waits for a change; Discard returns to the saved profile and Restore defaults resets currency, week start and bio. Every save, discard and reset leaves a line under the card with Undo. Before a profile exists the card is an Empty state with Create profile. For settings pages, account screens and any record that should show what a save will change.
FAQ
How do I load my own profile?
Replace START with the signed-in user's fields (name, email, currency, week, bio). The read view, the Changes list and the Save check are all derived from that object and the draft, so a new field means one entry in FIELDS, one input in the edit view and, if it needs a rule, one ...Problem helper.
How is the Changes list worked out?
changesOf compares the saved profile with the draft field by field and writes one line for each that differs. A bio is summarised by its length, not quoted. Nothing is stored: type the old value back and the line disappears.
What stops a bad save?
Save changes stays aria-disabled until something differs, and pressing it with no changes says "No changes to save." A missing name, an email without a domain or a bio over 160 characters refuses the save with the reason, shows it under the field and moves focus there.
What does Restore defaults reset?
Currency goes back to USD, the week to Monday and the bio to empty. The name and email stay, because a default can't know who you are. It changes the draft only, so you still press Save, and Undo puts the draft back.
What stays local, and how do I wire a real save?
The profile lives in state in this tab and a reload brings the first one back; nothing is sent. In your app call your API from save, keep the returned profile as saved, and send only the fields in changes. The snapshot behind Undo is a good place to call the revert endpoint.