# Personal Profile block

> Profile settings form with avatar upload, verified email, and regional preferences in a single card

Account profile settings page: avatar upload, identity fields (name, verified email, username, role, phone), regional preferences (timezone, week start, language), dismissible sync alert. ReUI Alert, Badge, PhoneInput; shadcn Card, InputGroup.

- Type: Pro block
- Category: [Profile](https://web.dev.reui.io/blocks/application/profile.md)
- Page: https://web.dev.reui.io/blocks/application/profile/profile-3
- MCP: `get_block("profile-3")`
- Built with: Alert, Avatar, Badge, Button, Card, Combobox, Field, Input, Input Group, Phone Input, Select, Separator, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A single untabbed card with a 2 column identity grid, label hint tooltips, an inline email Edit and a time format select

## Agent notes

- Replace the sample `PROFILE_IDENTITY`, since `DEFAULT_ROLE_OPTION` and the language, week and time format defaults are looked up from it
- Reset, Save Changes and the email Edit button have no handler and fields use `defaultValue`, so add form state and a submit action
- `ImageUploadField` only previews the picked file within `PROFILE_IMAGE_MAX_SIZE` and sends nothing, so add your own upload

## When not to use

- Members, permissions and integrations must share one tabbed page with these fields: use [Admin Permissions](https://web.dev.reui.io/blocks/application/profile/profile-2.md) (`get_block("profile-2")`)
- Profile edits sit beside security, notification and billing panels: use [Account Settings](https://web.dev.reui.io/blocks/application/settings/settings-7.md) (`get_block("settings-7")`)

## Third-party libraries

- React Phone Number Input v3: [API reference](https://catamphetamine.gitlab.io/react-phone-number-input/docs/index.html#phoneinputwithcountry), [docs](https://gitlab.com/catamphetamine/react-phone-number-input), through ReUI Phone Input

## Install

```bash
npx shadcn@latest add @reui/profile-3
```

## About Profile blocks

### When to use

- Account areas that switch profile, workspace, team, billing or access panels from tabs or a sidebar
- A personal profile edit page: avatar, name, verified email, username, phone and regional preferences
- An account subpage for one job: sender mailboxes, alerts, referrals, meeting capture, billing or API keys

### When not to use

- One panel of switch rows or integration cards, with no personal identity fields: use the [Settings blocks](https://web.dev.reui.io/blocks/application/settings.md)
- Entering a new record, such as an invoice with line items or a product listing: use the [Form blocks](https://web.dev.reui.io/blocks/application/form.md)
- The outer navigation layout around every page of a product, beyond account pages: use the [App Shell blocks](https://web.dev.reui.io/blocks/application/app-shell.md)

### Agent notes

- Each page.tsx wraps `Profile` in its own padding and centering; render `Profile` alone inside your layout

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.