Blocks
v1.0.0Added in 1.0.0
The account settings of a back office: profile, account, notifications, billing, security and a danger zone, with a save bar.
Pick a section in the left column (arrow keys move between them) or, with nav="tabs", in the tabs on top; on phones the sections are an iOS style list that pushes the section in with a back button and swipe back. Profile: upload a photo (crop, progress ring, remove), edit the name, title and a bio with a counter, the phone with its country, the language, a searchable time zone and the date format. Account: the email is read only with Verified; Change opens a dialog (a bottom sheet on phones) that asks for the new address and the current password, sends a 6 digit code (123456 passes, the sixth digit submits, Resend code waits 30 s) and then changes it. The workspace address checks itself when you leave the field (Checking…, then Available or Taken; "acme software" gets "Lowercase letters, digits and hyphens only"). Notifications: a switch per event and channel with a column toggle for all (one group per event on phones); switches save at once and flip back with a toast if the save fails. Quiet hours turn on with a switch and take two times (22:00 to 08:00 reads "next day"); the digest is a segmented choice. Billing: the plan with Change plan (a dialog to pick Start, Pro or Business with the monthly total) and Cancel (a confirmation; the plan then shows its end date and a way to resume it), the usage of users, AI tokens and storage, the card with Update, the company details with a CUI check and the address, and the invoices (cards on phones) with a download link each. Security: Change password opens a dialog with the strength meter and rules; Turn on starts a three step wizard: scan the QR code or copy the key, type the code (123456), then copy or download the ten backup codes; the badge On pops in and Turn off asks first. Revoke any other session or all of them at once; the current one cannot be revoked. Danger zone: Export counts up in a toast and then offers the file; Delete account asks you to type DELETE first. Any text change slides up the save bar with Discard and Save (mod+s); a failed save keeps the draft, shakes the bar and shows why, invalid fields turn red and the first one takes focus. Switching sections with unsaved changes asks first.
npx wingo-ui@latest add settings-pagePro item: the CLI needs a Pro account. See plans