# Account settings

> Profile with inline edits, security toggles, active sessions and guarded delete.

Block · Pro · https://lodeui.com/blocks/settings-account

## When to use

- The account page of a SaaS app.

## When not to use

- Team or billing settings: use their own blocks.

## Installation

```bash
npx shadcn@latest add @lode/settings-account
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { SettingsAccount } from "@/components/blocks/settings-account";

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

Built from: Dialog, Inline edit, Switch

## API reference

### SettingsAccount

Account settings: profile fields with inline editing and validation, avatar, security toggles, active sessions and a type-to-confirm delete. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Edit or save a field |
| Esc | Cancel editing |
| Tab | Move through settings |

## Accessibility

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

## Motion

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

## Responsive behavior

- Rows stack label above control on phones.

## Performance

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

## Notes for AI

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

## Related

- [Inline edit](https://lodeui.com/components/inline-edit) — Text that becomes a field on click; Enter saves with validation, Escape cancels.
- [Notification preferences](https://lodeui.com/blocks/notification-preferences) — Channel-by-event matrix with column toggles, quiet hours and unsaved-changes bar.
- [Team members](https://lodeui.com/blocks/team-members) — Seat usage, invite by email with role, change roles, resend or remove.
- [Billing settings](https://lodeui.com/blocks/billing-settings) — Plan, payment method, usage meters, invoices and a prorated plan change.