Settings Page
A React settings page combining a profile form, theme picker, notification preferences and a danger zone for destructive actions under one header.
src/registry/blocks/settings-page.tsx/r/settings-page.json
Installation#
bash
npx shadcn@latest add @minidev/settings-page
MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/settings-page.json
Usage#
tsx
import { SettingsPage } from "@/components/ui/settings-page"
export function Example() {
return <SettingsPage />
}
API reference#
SettingsPage takes no props. It ships with realistic sample content: install it, then edit the copy and data in the file directly. The file is yours.
Dependencies#
npm
React only
Related settings components#
Feature FlagsA 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.Admin User RowUser management row with avatar, online status dot, name, email, a role chip for admin, write or read access, and an accessible actions menu button.Avatar UploadReact 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.Bulk User ImportCSV 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.Connected AccountTailwind settings row for a linked third party account showing the provider and account name, with a Disconnect button. For OAuth and integrations.Danger ZoneDanger 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.
All settings page components