Installation
Usage
import { SettingsScreen } from "@/components/settings-screen"
export default function Page() {
return <SettingsScreen />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title / description | string | "Settings" / … | Heading and intro. |
| profile | { name: string; email: string } | example | Starting profile values. |
| notifications | { id; label; description?; enabled }[] | 3 examples | Email switches. |
| theme | "light" | "dark" | "system" | "system" | Starting theme. |
| onSave | (values) => void | Promise<void> | — | Gets every value; throw to keep the changes and show an error. |
| headingLevel | 1 | 2 | 1 | 1 when this is the page's main heading. |
Accessibility
- One form with labelled fields; each card is a labelled section linked from the side navigation.
- Switches and the theme control are real switch and radio-group widgets.
- Saving, saved and error states are announced politely; the hidden save bar is inert.
- The bar slides instantly under prefers-reduced-motion.
- Edited sections are announced in the navigation (", edited"); the shake and slide are skipped under prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.