Shadcn Settings Page Blocks for Security and Roles

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

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
A billing page with usage counters and an invoice table, or a referral rewards page: use the Profile blocks
The sidebar navigation that wraps every page of a product, the settings page included: use the App Shell blocks

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 API docs

Sonner v2: API reference, docs, used by 4 of 16 blocks
TanStack Table v9: API reference, docs, used by 1 of 16 blocks

Markdownhttps://web.dev.reui.io/blocks/application/settings.md

MCPsearch({ query: "settings", type: "block", category: "settings" })

Full index for agents:llms.txtReUI MCP setup

Shadcn Settings Page Blocks for Account, Workspace, and Developer Config

Settings pages fail in a predictable way: every row needs a different control. One is a switch, the next is a select, the next is a single button, the next is a paired enable all and disable all pair, and half of them need a Pro, Beta, or Required tag. The blocks here are built around that mixed row problem instead of assuming one uniform form.

Coverage runs from personal account settings through workspace administration to the developer surface. You get a tabbed account shell with avatar upload, two step verification, active sessions, delete account, and billing plans, workspace preference groups for AI, publishing, collaboration, and notifications, and the developer end with webhook endpoints, API keys, and connected apps.

Grouping patterns vary on purpose: Frame cards for related policy, collapsible General and Display sections, a side tab rail, and labeled sections inside a single list. Pick the one that matches how many settings you actually have, because a side rail over eight rows looks empty and a flat list of eighty is unusable.

All Settings Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Import Sources Import services settings step with selectable integration cards and a 2-pick limit
Privacy Controls Privacy and preferences settings card with mixed-control rows, switches, buttons and Pro/Beta badges
General Settings General Settings Form with Per-Row Controls, Required and Pro Badges
App Connections App connections settings page with integrations grouped into labeled sections and per-row status
Role Capabilities Role Permissions Settings Panel with Two-Column Switch Toggle Grid
Integration Events Integrations settings list with brand-logo cards and connect or disconnect toggle buttons
Account Settings Account settings page with side-tab navigation for profile, security, notifications, and billing
Webhook Endpoints Webhook endpoints settings list with per-endpoint delivery-health alerts and enable toggle
General & Display Workspace Preferences Settings With Collapsible Sections of Select and Switch Rows
Security Settings Workspace security settings in Frame cards mixing toggles, a timeout select, and plan-tier badges
Notification Channels Notification preferences settings with tabbed channel matrix table for Email, Slack, and In-app
Notification Delivery Notification settings page with per-channel delivery modes and collapsible auto-follow toggles
Integrations Gallery Integrations settings gallery, app cards in a grid with connect button and toggle switch
API Integrations API integrations settings data grid with copyable keys, status switches, and pause-all toggle
Workspace Preferences Workspace settings with grouped preference cards, toggles, badges, and a team avatar row
Connected Apps Connected apps integration settings with per-row status badges and connect actions

Settings Surfaces Covered

Access control and roles a two column grid of outlined permission cards, each a titled capability with a description and an on or off Switch, under a header with a New Permission action. RBAC without hand building the matrix.
Security and session policy session policy, login methods, and access restrictions grouped into Frame cards, mixing switches with a timeout Select and plan tier Badge gating for Basic, Business, and Enterprise, plus two step verification and active sessions on the account shell.
Notification channels a tabbed matrix Table with per row email, Slack, and in app Checkbox cells across Projects, Messages, Reports, and System, and a second layout with per channel delivery mode selects and a collapsible auto follow section.
Webhooks and API keys endpoint rows with Delivering, Retrying, and Paused status, delivery health tooltips, copy URL, rotate secret, and remove, alongside a DataGrid of API integrations with copyable key badges, daily call counts, and a pause all toggle.
Connected apps and integrations integration rows, grouped sections, and card galleries with brand logos, Connected, Available, Needs review and Preview states, connect and disconnect buttons that reveal per channel toggles, and a wizard step for importing from third party services.

Mixed Control Rows, Not One Big Form

The general settings block puts a different control on every row: a plain Input, a prefixed URL InputGroup, a Select, a ToggleGroup, color swatches, and a list of switches, each with its own label and description column and a Required or Pro Badge where it applies. That is the shape most real settings pages need, and it is the hardest one to lay out cleanly.

The privacy block extends the same idea with row level actions: some rows toggle, some expose a single button, and some carry a paired Enable all and Disable all control. Copying those row shapes into your own settings screen is usually faster than inventing a fourth variant, and it keeps label, description, and control alignment consistent down the page.

Status, Gating, and Feedback

Plan tier badges for Basic, Business, and Enterprise plus Pro and Beta tags mark settings behind an upgrade, so you can wire gating without redesigning the row.
Per row status badges report the live state of a connection: Connected, Needs review, Available, Preview, Delivering, Retrying, Paused.
Delivery health tooltips on webhook endpoints surface failure detail in place, instead of pushing the user to a separate logs screen.
Selection limits come with feedback, for example the import step that caps you at two services and explains the cap with a toast.
Destructive actions such as delete account, disconnect, rotate secret, and remove endpoint sit inside the settings flow with the right visual weight rather than being hidden.

Related Shadcn Application Block Categories

Settings is usually one section of a larger authenticated app. These pair with it directly.

Form (12) Form layouts with validation and grouped fields for the data entry parts of settings.
Auth (20) Login, register, forgot password, and two factor authentication page layouts.
Profile (10) Profile pages with avatars, bios, activity feeds, and account management sections.
App Shell (35) Sidebar shells that host settings as one section of a multi page dashboard.
Wizard (7) Multi step flows with progress indicators and step navigation for guided setup.
Dialog (14) Confirmation, alert, and overlay dialogs for destructive settings actions.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Do these settings blocks include role based access control?

Yes. One block is a dedicated RBAC panel: a two column grid of outlined permission cards, each with a title, a description, and an on or off switch, under a header with a New Permission button. Pair it with the workspace security block, which covers session policy, login methods, access restrictions, and plan tier gating.

Is there a notification preferences matrix?

Two approaches ship here. One is a tabbed table matrix with email, Slack, and in app checkboxes per event, grouped under Projects, Messages, Reports, and System tabs. The other is a per channel page with delivery mode selects for inbox, email, browser, and mobile, connect rows for Slack, Zoom, and Google Meet, and a collapsible auto follow section.

How do I install and wire a settings block?

Run the shadcn CLI command from the block page against the ReUI registry, which copies the source and its dependencies into your project. Controls ship with local state so the preview is interactive, so wiring means replacing that local state with your own settings query and mutation calls, row by row, without touching the layout.

Can I match these to my design system?

Yes. Rows are built from shadcn Item, Switch, Select, and Checkbox inside a ReUI Frame, all styled with Tailwind and your theme tokens. Choose a base, style, and radius in the customizer before copying, or restyle the primitives afterwards. Nothing depends on a settings specific CSS bundle or a theme you cannot change.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.