Settings Screen React component
A settings page with section navigation (Profile, Workspace, Appearance, Danger zone), labelled form rows with validation, theme cards, accent colours and density, an unsaved-changes bar that slides up with Discard and Save, dots on sections with pending edits, and a typed confirmation before deleting the workspace.
About the Settings Screen component
Settings Screen is a complete settings page. A section list on the left takes people to their profile, the workspace details, appearance and the danger zone, and each section is a tidy set of rows with a label and a short explanation next to every control.
Nothing is saved behind people's backs: as soon as something changes, a bar slides up from the bottom with the number of unsaved changes and Discard or Save, and sections with pending edits get a dot. Deleting the workspace asks people to type its name first.
When to use it
Use it for account and workspace settings in SaaS apps, admin panels or any product where people change several preferences at once.
Pair it with the dedicated notification, security and password blocks for those sections.
Installation
Add the Settings Screen component to your project with the shadcn CLI. It lands in components/settings-screen.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/settings-screenOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<SettingsScreen /> accepts 5 props (required ones are marked *).
| Prop | Type | Default |
|---|---|---|
| values | object | DEFAULT_VALUES |
| values.name* | string | — |
| values.email* | string | — |
| values.bio* | string | — |
| values.workspace* | string | — |
| values.slug* | string | — |
| values.timezone* | string | — |
| values.language* | string | — |
| values.appearance* | "light" | "dark" | "system" | — |
| values.accent* | string | — |
| values.density* | "comfortable" | "compact" | — |
| onSave | (values: SettingsValues) => Promise<void> | void | — |
- valuesobjectDefault: DEFAULT_VALUES
- values.name*string
- values.email*string
- values.bio*string
- values.workspace*string
- values.slug*string
- values.timezone*string
- values.language*string
- values.appearance*"light" | "dark" | "system"
- values.accent*string
- values.density*"comfortable" | "compact"
- onSave(values: SettingsValues) => Promise<void> | void
Show all 15 propsShow fewer
| onDeleteWorkspace | () => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- onDeleteWorkspace() => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Settings Screen FAQ
- How does the unsaved changes bar know what changed?
- The block keeps the last saved values and compares every field with the form. The bar counts the differences, Discard restores the saved values and Save calls onSave, then treats the new values as saved.
- What happens if a field is invalid when saving?
- The name and email fields show inline errors, and pressing Save shakes the bar instead of saving until they are fixed.
- Does Appearance change the page?
- The block stores the choice and uses the accent colour in its own controls. Apply theme, accent and density to your app in onSave.
- How is deleting protected?
- The Delete workspace button stays disabled until the workspace's address is typed exactly, then calls onDeleteWorkspace.
- Is it accessible?
- Every control has a label, errors use aria-invalid and role alert, the section nav uses aria-current and labels its unsaved dots, theme, accent and density are radiogroups, and the unsaved bar is a labelled region with the save result announced.
