# Account & Team Settings block

> Account settings shell with vertical sidebar tabs for profile, workspace, team, and billing

SaaS account settings page: a vertical Tabs sidebar switching Profile, Workspace, Team, and Billing panels on ReUI Frame and Badge, plus a searchable, filterable, paginated ReUI DataGrid of team members and shadcn Field, Input, Switch, and Combobox.

- Type: Pro block
- Category: [Profile](https://web.dev.reui.io/blocks/application/profile.md)
- Page: https://web.dev.reui.io/blocks/application/profile/profile-1
- MCP: `get_block("profile-1")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Button, Checkbox, Combobox, Data Grid, Dropdown Menu, Field, Frame, Input, Input Group, Item, Label, Phone Input, Popover, Select, Separator, Switch, Tabs, Textarea
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A vertical tab rail over 4 panels, with a searchable team DataGrid, a status filter with counts and 3 seat size cards

## Agent notes

- Replace the sample `TEAM_MEMBERS`, which `TeamDataGridView` searches, filters and pages in the browser, so server data needs a new source
- Row menu items, Invite member and `handleRemoveConfirm` only raise toasts, so removing a member never changes `TEAM_MEMBERS`
- Save changes, Save workspace and Update billing have no handler and the fields use `defaultValue`, so add form state and a submit action

## When not to use

- The account page needs security and notification panels, not a team roster: use [Account Settings](https://web.dev.reui.io/blocks/application/settings/settings-7.md) (`get_block("settings-7")`)
- The settings must open in a modal over the current page, not as a page: use [Account Settings Modal](https://web.dev.reui.io/blocks/application/dialog/dialog-10.md) (`get_block("dialog-10")`)

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- 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-1
```

## 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.