# General Settings block

> General Settings Form with Per-Row Controls, Required and Pro Badges

Stacked settings rows in a ReUI Frame, each pairing a labeled description with its own control: Input, prefixed URL InputGroup, Select, ToggleGroup, color swatches, Switch list, plus Required and Pro badges. Preferences, app config, account settings.

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

## Best for

Project config rows with an https prefixed endpoint, CORS origin buttons, 6 accent swatches and a 3 way date format toggle

## Agent notes

- Replace `ACCENT_COLORS`, `PREFERENCES`, `DAYS`, `REGIONS` and `CURRENCIES`; the chosen swatch lives only in `ColorPicker` state
- Add origin, Import from file, Reset and Save changes have no handler, and the name and endpoint inputs use `defaultValue` with no state
- The Upgrade to Pro text is only a `badge` prop, so the accent swatches stay selectable until you gate them

## When not to use

- Many settings panels behind a grouped sidebar, such as sessions or webhooks: use [Account Settings Hub](https://web.dev.reui.io/blocks/application/profile/profile-9.md) (`get_block("profile-9")`)
- A sign-in policy page split into line tabs for email, phone, password and passkey: use [Auth Method Settings](https://web.dev.reui.io/blocks/application/form/form-4.md) (`get_block("form-4")`)

## Install

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

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