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.
- Settings 1 Import services settings step with selectable integration cards and a 2-pick limit
- Settings 2 Privacy and preferences settings card with mixed-control rows, switches, buttons and Pro/Beta badges
- Settings 3 General Settings Form with Per-Row Controls, Required and Pro Badges
- Settings 4 App connections settings page with integrations grouped into labeled sections and per-row status
- Settings 5 Role Permissions Settings Panel with Two-Column Switch Toggle Grid
- Settings 6 Integrations settings list with brand-logo cards and connect or disconnect toggle buttons
- Settings 7 Account settings page with side-tab navigation for profile, security, notifications, and billing
- Settings 8 Webhook endpoints settings list with per-endpoint delivery-health alerts and enable toggle
- Settings 9 Workspace Preferences Settings With Collapsible Sections of Select and Switch Rows
- Settings 10 Workspace security settings in Frame cards mixing toggles, a timeout select, and plan-tier badges
- Settings 11 Notification preferences settings with tabbed channel matrix table for Email, Slack, and In-app
- Settings 12 Notification settings page with per-channel delivery modes and collapsible auto-follow toggles
- Settings 13 Integrations settings gallery, app cards in a grid with connect button and toggle switch
- Settings 14 API integrations settings data grid with copyable keys, status switches, and pause-all toggle
- Settings 15 Workspace settings with grouped preference cards, toggles, badges, and a team avatar row
- Settings 16 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 (9) Profile pages with avatars, bios, activity feeds, and account management sections.
- App Shell (20) 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 (291) Browse 291 Shadcn Application blocks across 21 categories.
- Shadcn Data Grid Blocks (35) Browse 35 Shadcn Data Grid blocks across 8 categories.
- Shadcn Solutions Blocks (65) Browse 65 Shadcn Solutions blocks across 9 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 12 categories.
- Shadcn Marketing Blocks (24) Browse 24 Shadcn Marketing blocks across 4 categories.