React settings page components
Free React settings components: profile forms, team members, roles and permissions, API keys, integrations, SSO, audit logs and danger zones for SaaS apps.
24 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Settings pages grow with a product, so they need a structure that stays tidy. These components cover account, team, security and developer settings with consistent section headers and save patterns.
Destructive actions sit in a clearly marked danger zone with typed confirmation, and permission screens show what each role can do in a readable matrix.
Components 22
Admin User RowuiUser management row with avatar, online status dot, name, email, a role chip for admin, write or read access, and an accessible actions menu button.npx shadcn@latest add ui.minidev.pro/r/admin-user-row.jsonAvatar UploaduiReact profile photo uploader with an avatar preview and an Upload button that opens a hidden image file input. Shows initials until a picture is chosen.npx shadcn@latest add ui.minidev.pro/r/avatar-upload.jsonBulk User ImportuiCSV user import panel with a format hint for email, name and role, a CSV-only dropzone and an Import users button that enables once a file is added.npx shadcn@latest add ui.minidev.pro/r/bulk-user-import.jsonConnected AccountuiTailwind settings row for a linked third party account showing the provider and account name, with a Disconnect button. For OAuth and integrations.npx shadcn@latest add ui.minidev.pro/r/connected-account.jsonDanger ZoneuiDanger zone settings card with a red outline, a warning that the action cannot be undone and a destructive delete button. Put it last on settings pages.npx shadcn@latest add ui.minidev.pro/r/danger-zone.jsonDelete Account ConfirmuiAccount deletion step with a danger alert and a confirmation field: the delete button stays disabled until the user types DELETE. Guards against misclicks.npx shadcn@latest add ui.minidev.pro/r/delete-account-confirm.jsonExport DatauiSettings card to request a data export, explaining what the JSON export includes and when it will be ready, with a Request export button.npx shadcn@latest add ui.minidev.pro/r/export-data.jsonFeature Flag ToggleuiA settings row for flipping a feature flag on or off: flag name, optional description and a labeled switch, wired as a controlled React component.npx shadcn@latest add ui.minidev.pro/r/feature-flag-toggle.jsonIntegration CarduiAn app integration tile with the service name, a short description, a Connected or Available badge and a Connect or Manage button. Built in React.npx shadcn@latest add ui.minidev.pro/r/integration-card.jsonInvite MembersuiA team invite panel with an email input, a Send button and badges for pending invitations. A starting point for workspace member management in SaaS settings.npx shadcn@latest add ui.minidev.pro/r/invite-members.jsonIp AllowlistuiAn editor for IP and CIDR allowlists: a monospace list with a remove button per entry plus an input and Add button that skips duplicates. Built in React.npx shadcn@latest add ui.minidev.pro/r/ip-allowlist.jsonLanguage PickeruiA grid of language options exposed as an accessible listbox, with the selected language outlined in the accent color. Plug it into locale or profile settings.npx shadcn@latest add ui.minidev.pro/r/language-picker.jsonNotification PreferencesuiA notification settings list of labeled switches for email digests, product updates and security alerts. A simple React start for preference pages.npx shadcn@latest add ui.minidev.pro/r/notification-preferences.jsonPermission ChipuiA small uppercase chip for access levels: admin, write or read. Use it in member lists, API key tables and sharing dialogs to show what a user or token can do.npx shadcn@latest add ui.minidev.pro/r/permission-chip.jsonProfile FormuiAn account profile form with a display name input, a bio textarea and a Save profile button, composed from FormField, Input and Textarea in React.npx shadcn@latest add ui.minidev.pro/r/profile-form.jsonRegion PickeruiDeployment region picker with selectable cards for each region and its latency in milliseconds. Uses radio semantics and an accent tint for the chosen one.npx shadcn@latest add ui.minidev.pro/r/region-picker.jsonRole Permission MatrixuiRole and permission matrix with roles as columns and permissions as rows, each cell a labelled checkbox. Scrolls sideways on small screens, styled in Tailwind.npx shadcn@latest add ui.minidev.pro/r/role-permission-matrix.jsonRole PickeruiTeam role picker built on the radio group, offering Owner, Admin and Member options with linked labels. Drop it into invite dialogs and member settings forms.npx shadcn@latest add ui.minidev.pro/r/role-picker.jsonSession ListuiActive sessions list showing each device and location, marking the current device and giving other sessions a Revoke button. A React account security block.npx shadcn@latest add ui.minidev.pro/r/session-list.jsonSettings LayoutuiSettings page layout with a 200px side nav column and a content area, plus a SettingsSection for titled groups divided by hairlines. Tailwind grid based.npx shadcn@latest add ui.minidev.pro/r/settings-layout.jsonTeam Member RowuiTeam member row with an initials avatar, name, email and a role badge, truncating cleanly in narrow lists. Built for team pages and member management in React.npx shadcn@latest add ui.minidev.pro/r/team-member-row.jsonTheme PickeruiLight, dark and system theme picker as a segmented radiogroup that toggles the dark class on the root element for Tailwind dark mode and reports it to onChange.npx shadcn@latest add ui.minidev.pro/r/theme-picker.json
Blocks and full pages 2
Feature FlagsblockA feature flag settings list that pairs each flag key in monospace with a labelled switch. Drop it into admin or developer settings to toggle rollouts.npx shadcn@latest add ui.minidev.pro/r/feature-flags.jsonSettings PageblockA React settings page combining a profile form, theme picker, notification preferences and a danger zone for destructive actions under one header.npx shadcn@latest add ui.minidev.pro/r/settings-page.json
Frequently asked questions
Is there a full settings page layout?
Yes. The settings layout gives you a side navigation and content column, and the settings page block shows a complete example.
How should I handle deleting an account?
Use the danger zone with the delete account confirm component, which asks the user to type a phrase before the action is enabled.
Can I show API keys safely?
The API key list and secret reveal components mask keys by default and let users copy without exposing the full value on screen.