# Account Settings Hub block

> Account settings hub with grouped collapsible sidebar navigation and 11 swappable form panels

Workspace settings page where a collapsible grouped sidebar switches 11 card-based form panels: authentication, profile, billing, API keys, webhooks, audit. ReUI Badge with shadcn Sidebar, Card, Field, Input, Select, Switch, Checkbox, RadioGroup.

- Type: Pro block
- Category: [Profile](https://web.dev.reui.io/blocks/application/profile.md)
- Page: https://web.dev.reui.io/blocks/application/profile/profile-9
- MCP: `get_block("profile-9")`
- Built with: Badge, Button, Card, Checkbox, Field, Input, Input Group, Radio Group, Select, Sidebar, Spinner, Switch, Textarea
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Security and developer panels such as sessions, webhooks and audit retention, under a Sidebar of 3 collapsible groups with menu badges

## Agent notes

- Replace the sample `DEFAULT_PROFILE_VALUES` (name, email, webhook URL, API prefix), which the panel inputs use as `defaultValue`
- All panels share one form: Save runs `handleSubmit`, waits 900 ms and shows `showSavedToast`, while Cancel has no handler
- Every select value sits in `useState` inside `Profile` and is passed to `ActivePanel`, so persist them yourself on save

## When not to use

- Only 4 panels are needed, with a team roster and seat billing: use [Account & Team Settings](https://web.dev.reui.io/blocks/application/profile/profile-1.md) (`get_block("profile-1")`)
- The panels open in a modal with a side rail from another page: use [Account Settings Modal](https://web.dev.reui.io/blocks/application/dialog/dialog-10.md) (`get_block("dialog-10")`)

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

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

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