# Shadcn Settings blocks

> Settings and preferences pages with grouped options, toggles, and configuration panels.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/settings
- Blocks: 16
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Third-party libraries

- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 4 of 16 blocks
- 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), used by 1 of 16 blocks

## Blocks

- [Import Sources](https://web.dev.reui.io/blocks/application/settings/settings-1.md): Import services settings step with selectable integration cards and a 2-pick limit. Best for import sources capped at 2 picks of 9, with a warning toast past the cap and the pick count on the Next step button.
- [Privacy Controls](https://web.dev.reui.io/blocks/application/settings/settings-2.md): Privacy and preferences settings card with mixed-control rows, switches, buttons and Pro/Beta badges. Best for privacy rows whose control changes per row: a switch, a lone Setup button or a paired Disable all and Enable all.
- [General Settings](https://web.dev.reui.io/blocks/application/settings/settings-3.md): General Settings Form with Per-Row Controls, Required and Pro Badges. Best for project config rows with an https prefixed endpoint, CORS origin buttons, 6 accent swatches and a 3 way date format toggle.
- [App Connections](https://web.dev.reui.io/blocks/application/settings/settings-4.md): App connections settings page with integrations grouped into labeled sections and per-row status. Best for connected apps in Communication, Collaboration and Scheduling groups, each with a status dot and a menu whose items follow that status.
- [Role Capabilities](https://web.dev.reui.io/blocks/application/settings/settings-5.md): Role Permissions Settings Panel with Two-Column Switch Toggle Grid. Best for one role's 10 capabilities as outlined switch cards in a 2 column grid, such as billing management and data export.
- [Integration Events](https://web.dev.reui.io/blocks/application/settings/settings-6.md): Integrations settings list with brand-logo cards and connect or disconnect toggle buttons. Best for stacked app cards where connecting one reveals its 2 event channel switches, from workflow runs to failed payments.
- [Account Settings](https://web.dev.reui.io/blocks/application/settings/settings-7.md): Account settings page with side-tab navigation for profile, security, notifications, and billing. Best for a 4 tab account area with photo upload, password change, active sessions to revoke, quiet hours and 3 plan rows.
- [Webhook Endpoints](https://web.dev.reui.io/blocks/application/settings/settings-8.md): Webhook endpoints settings list with per-endpoint delivery-health alerts and enable toggle. Best for webhook routes whose tooltip alerts flag delivery lag and stale signing secrets, with copy URL, rotate secret and a pause switch.
- [General & Display](https://web.dev.reui.io/blocks/application/settings/settings-9.md): Workspace Preferences Settings With Collapsible Sections of Select and Switch Rows. Best for collapsible General and Display groups of select and switch rows, such as default view, color theme and sidebar position.
- [Security Settings](https://web.dev.reui.io/blocks/application/settings/settings-10.md): Workspace security settings in Frame cards mixing toggles, a timeout select, and plan-tier badges. Best for workspace sign in rules: enforced 2FA, a session timeout, magic link login and plan tier badges in place of a control.
- [Notification Channels](https://web.dev.reui.io/blocks/application/settings/settings-11.md): Notification preferences settings with tabbed channel matrix table for Email, Slack, and In-app. Best for an event by channel checkbox matrix with Email, Slack and In-app columns, split over 4 line tabs from Projects to System.
- [Notification Delivery](https://web.dev.reui.io/blocks/application/settings/settings-12.md): Notification settings page with per-channel delivery modes and collapsible auto-follow toggles. Best for per channel delivery modes from Default to Muted, a browser banner opt in and an auto-follow switch that locks its 3 sub switches when off.
- [Integrations Gallery](https://web.dev.reui.io/blocks/application/settings/settings-13.md): Integrations settings gallery, app cards in a grid with connect button and toggle switch. Best for a 3 column grid of 9 logo tiles whose footer pairs a Connect button with a Switch bound to the same connected state.
- [API Integrations](https://web.dev.reui.io/blocks/application/settings/settings-14.md): API integrations settings data grid with copyable keys, status switches, and pause-all toggle. Best for row checkboxes, hideable columns and copyable API keys over 32 integrations at 10 a page, with a Pause all switch for every row.
- [Workspace Preferences](https://web.dev.reui.io/blocks/application/settings/settings-15.md): Workspace settings with grouped preference cards, toggles, badges, and a team avatar row. Best for icon rows across AI, publishing, collaboration and notification groups, with domain buttons and a +9 avatar count that lists every member.
- [Connected Apps](https://web.dev.reui.io/blocks/application/settings/settings-16.md): Connected apps integration settings with per-row status badges and connect actions. Best for a flat list of 7 apps tagged Connected, Available or Preview, each with a Configure or Install button, under a Build Connector action.

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.