# Account Settings block

> Account settings page with side-tab navigation for profile, security, notifications, and billing

Tabbed account settings shell with a side tab rail. Profile with avatar upload, two-step verification, active sessions, delete account, and billing plans. ReUI Alert and Badge with shadcn Tabs, Card, Field, Input, Select, Switch, Item, Avatar.

- Type: Pro block
- Category: [Settings](https://web.dev.reui.io/blocks/application/settings.md)
- Page: https://web.dev.reui.io/blocks/application/settings/settings-7
- MCP: `get_block("settings-7")`
- Built with: Alert, Avatar, Badge, Button, Card, Field, Input, Input Group, Item, Select, Switch, Tabs, Textarea
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A 4 tab account area with photo upload, password change, active sessions to revoke, quiet hours and 3 plan rows

## Agent notes

- Replace `SESSIONS`, `BILLING_PLANS` and option lists such as `TIMEZONES` and `QUIET_HOURS` with your account data
- Add or remove a tab in `SETTINGS_TAB_ITEMS` and `TAB_COMPONENTS` together, since `AccountSettings` looks each tab value up in both
- Update password, Revoke, Delete account and Save buttons have no handler; only `ProfileAvatarUpload` reacts, previewing the picked file locally

## When not to use

- A members table or team directory shown inside vertical settings tabs: use [Account & Team Settings](https://web.dev.reui.io/blocks/application/profile/profile-1.md) (`get_block("profile-1")`)
- The same tabbed account settings shown as a modal over the page: use [Account Settings Modal](https://web.dev.reui.io/blocks/application/dialog/dialog-10.md) (`get_block("dialog-10")`)

## Install

```bash
npx shadcn@latest add @reui/settings-7
```

## About Settings blocks

### When to use

- Preference pages of labeled rows, each row carrying its own switch, select, input or button
- Integration pages that pick, connect or configure third party apps, webhook routes and API keys
- Account, security, notification channel and role permission policies

### When not to use

- A new record to fill in and submit, such as an invoice, a product or a member invite: use the [Form blocks](https://web.dev.reui.io/blocks/application/form.md)
- A billing page with usage counters and an invoice table, or a referral rewards page: use the [Profile blocks](https://web.dev.reui.io/blocks/application/profile.md)
- The sidebar navigation that wraps every page of a product, the settings page included: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)

### Agent notes

- Each page.tsx centers the root in a padded `min-h-svh` wrapper and each root caps its own max width; remove both inside your settings route
- Nothing is saved and no block calls an API, so wire every button and control, including any `useState` or `defaultChecked` value, to your settings API

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.