Account settingsPro

• Inline edits with validation
• 2FA and alerts
• Sign out sessions
• Type-to-confirm delete

• The account page of a SaaS app.

• Team or billing settings: use their own blocks.

Import it from @/components/blocks/settings-account after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { SettingsAccount } from "@/components/blocks/settings-account";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <SettingsAccount />
    </main>
  );
}

• Inline edits name their field; switches are labelled; sign-out buttons name the device.
• Delete requires typing the username.

• Edits cross-fade with a saved check; signed-out sessions collapse; the dialog scales in.

• Rows stack label above control on phones.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Throw from onSave with your API's message, e.g. "That username is taken".