Settings pages for React apps
Settings pages with a section column, cards per topic and a save bar that appears on change.
5 variants
Switch category
Marketing
- Hero17
- Features15
- Logo clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to action11
- FAQ7
- Newsletter12
- Banners9
- Popups and consent7
- Services7
- Use cases6
- Security and trust7
- Changelog and roadmap6
- Launch and waitlist6
- Product tour6
- Press and awards10
- AI features6
- App download5
- Donations and support4
- Problem and solution5
- Objections5
- Calculators10
- Quiz and product finder5
- Free trial5
- Referral and partners10
- Community5
- Open source5
- Manifesto5
- Offer5
- Lead magnet4
- Scroll stories20
- Scroll journeys13
- Scroll effects13
- Scroll reveals and transitions15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error pages5
- Careers7
- Case studies6
- Portfolio6
- Events and webinars6
- Help center6
- Legal pages5
- Documentation4
- Search results5
- Resources and downloads4
- Podcast4
- Editorial15
- Authors and interviews10
- Glossary5
- Recipes5
- Data stories10
- Long reads5
- Surveys and feedback14
- Form states12
- Request forms16
- Applications and sign-ups13
- Address, payment and consent12
App
- Authentication9
- Dashboards6
- Tables6
- Settings5
- AI and chat16
- Calendar5
- Inbox and messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing and usage10
- Developer settings15
- Security and access10
- Import, export and history15
- Automation and builders14
- AI answers18
- AI writing and creation13
- AI setup14
- AI assistants9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms and stays5
- Classes and schedules6
- Medical practice5
- Law firm5
- Salon and spa5
- Automotive5
- Travel5
- Sports club5
- Coworking5
- Museum5
- Cinema5
- School5
- Trades5
- Insurance5
- Banking5
- Personal brand15
- Speakers and media kits10
- Creators15
- Coaching and consulting10
- Artists and musicians15
- Dental practice5
- Veterinary practice5
- Therapy practice5
- Weddings and events5
- Architecture studio5
- Tax advisor5
- Estate agent5
- Florist5
- Winery5
- Daycare5
- Driving school5
- Care services5
- Festival5
Elements
- Buttons20
- Forms and inputs22
- Pickers and selections21
- Special input fields20
- Cards10
- Overlays21
- Navigation elements15
- Menu bars and switchers14
- Data display15
- Progress and states13
- Lists, trees and timelines17
- Charts22
- Comparison charts22
- Statistical charts20
- KPI, live and map charts22
- Text effects15
- Text accents16
- Backgrounds19
- Beams, particles and motion18
- Media19
- Code and JSON8
- Panels and splitters4
Profile, account, billing and team
Settings pages are rarely visited and often confusing, so they need a calm structure. The five pages here put sections in a column on the left, group fields in cards per topic and show a save bar only when something changed.
Profile edits name, picture and public details. Account with danger zone handles email, password and deleting the account, with a confirmation that asks for the name. Notifications switches channels and topics with real switches. Billing shows the plan, the payment method and invoices, Team members invites people and sets their role.
Save settings where it is clear, either right away with a switch or with the save bar for forms, but never mixed in one card. Put destructive actions last and in their own card. Every field keeps its label visible, placeholders disappear while people type.
Details
What Settings brings along, read from the registry and the source.
- Area
- App
- Variants
- 5
- Version
- 1.0.2 · since 1.0.0
- File
- components/ui/settings.tsx
- npm packages
- None
- Languages
- English and German, 97 texts of its own
- Studio
- Adjust in code
- In collections
- App dashboard
- Build with AI
- Over MCP in Claude, Cursor, Copilot and Codex
Props
The SettingsProps interface from components/ui/settings.tsx, with the comments from the code.
variantoptionalSettingsVariantprofileaccountnotificationsbillingteam-members
titleoptionalstringdescriptionoptionalstringnavrequiredSettingsNavItem[]Sections of the settings. Desktop: a column on the left. Tablets and phones: tabs on top.
profileoptional{ name: string; username: string; email: string; bio?: string; website?: string; urlPrefix: string; avatar?: React.ReactNode }profile
accountoptional{ email: string; workspace: string; language: string; languages: { value: string; label: string }[]; sessions: { device: string; place: string; active: string; current?: boolean; icon?: IconName }[]; }account
notificationsoptional{ title: string; description?: string; items: NotificationItem[] }[]notifications
billingoptional{ plan: { name: string; price: number; period: string; renews: string; seats: string }; usage: { label: string; used: number; limit: number; unit?: string }[]; card: { label: string; expires: string }; invoices: { id: string; date: string; amount: number; status: string }[]; currency?: string; }billing
teamoptional{ members: TeamMember[]; invites: { email: string; role: string; sent: string }[]; roles: string[]; seats: { used: number; total: number } }team-members
onSaveoptional(section: SettingsVariant, values: Record<string, unknown>) => void | Promise<void>Called with the changed values. Without it the block simulates saving.
Built-in texts
Settings writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.
Show all 97 texts
| Key | English | German |
|---|---|---|
| sections | English Settings sections | German Bereiche der Einstellungen |
| save | English Save changes | German Änderungen speichern |
| saving | English Saving… | German Wird gespeichert… |
| saved | English Saved | German Gespeichert |
| discard | English Discard | German Verwerfen |
| unsaved | English You have unsaved changes | German Du hast ungespeicherte Änderungen |
| avatar | English Profile picture | German Profilbild |
| avatarHint | English Square, at least 400 px. JPG, PNG or WebP. | German Quadratisch, mindestens 400 px. JPG, PNG oder WebP. |
| upload | English Upload new | German Neues hochladen |
| remove | English Remove | German Entfernen |
| name | English Name | German Name |
| nameHint | English Shown on your profile and in mentions. | German Steht in deinem Profil und bei Erwähnungen. |
| username | English Username | German Benutzername |
| bio | English About you | German Über dich |
| bioHint | English {n} characters left | German Noch {n} Zeichen |
| website | English Website | German Website |
| English Email | German E-Mail | |
| publicProfile | English Public profile | German Öffentliches Profil |
| publicProfileText | English This is how other people see you in comments and on shared pages. | German So sehen dich andere in Kommentaren und auf geteilten Seiten. |
| emailSection | English Email address | German E-Mail-Adresse |
| emailText | English Used for sign-in and important messages. We confirm a new address before it is used. | German Für die Anmeldung und wichtige Nachrichten. Eine neue Adresse bestätigen wir, bevor sie gilt. |
| change | English Change | German Ändern |
| password | English Password | German Passwort |
| passwordText | English Last changed 4 months ago. | German Zuletzt vor 4 Monaten geändert. |
| current | English Current password | German Aktuelles Passwort |
| newPassword | English New password | German Neues Passwort |
| updatePassword | English Update password | German Passwort ändern |
| language | English Language | German Sprache |
| languageText | English For the interface and emails. | German Für Oberfläche und E-Mails. |
| sessions | English Active sessions | German Aktive Sitzungen |
| sessionsText | English Devices that are signed in right now. | German Geräte, die gerade angemeldet sind. |
| thisDevice | English This device | German Dieses Gerät |
| signOut | English Sign out | German Abmelden |
| signOutAll | English Sign out everywhere else | German Überall sonst abmelden |
| signedOut | English Signed out | German Abgemeldet |
| danger | English Danger zone | German Gefahrenzone |
| dangerText | English These actions cannot be undone. Please be sure. | German Diese Schritte lassen sich nicht rückgängig machen. Bitte sei dir sicher. |
| export | English Export all data | German Alle Daten exportieren |
| exportText | English A ZIP with every project, file and comment. | German Ein ZIP mit allen Projekten, Dateien und Kommentaren. |
| exportBtn | English Request export | German Export anfordern |
| deleteWs | English Delete workspace | German Arbeitsbereich löschen |
| deleteText | English Removes {name} with all projects for everyone. | German Entfernt {name} mit allen Projekten für alle. |
| deleteConfirm | English Type {name} to confirm | German Zur Bestätigung {name} eingeben |
| deleteFinal | English Delete forever | German Endgültig löschen |
| cancel | English Cancel | German Abbrechen |
| deleteTitle | English Delete {name}? | German {name} löschen? |
| deleteBody | English All projects, files and members are removed after 7 days. You can restore the workspace until then. | German Alle Projekte, Dateien und Mitglieder werden nach 7 Tagen entfernt. Bis dahin kannst du den Arbeitsbereich wiederherstellen. |
| deleted | English Deletion scheduled. You can undo it for 7 days. | German Löschung geplant. Du kannst sie 7 Tage lang rückgängig machen. |
| cancelTitle | English Cancel your subscription? | German Abo wirklich kündigen? |
| cancelBody | English {plan} stays active until {date}. After that the workspace moves to the free plan, nothing is deleted. | German {plan} bleibt bis {date} aktiv. Danach wechselt der Arbeitsbereich ins kostenlose Paket, gelöscht wird nichts. |
| keepPlan | English Keep plan | German Paket behalten |
| cancelled | English Cancelled. {plan} stays active until {date}. | German Gekündigt. {plan} bleibt bis {date} aktiv. |
| undoCancel | English Resume subscription | German Abo fortsetzen |
| channel | English Channel | German Kanal |
| emailCol | English Email | German E-Mail |
| pushCol | English Push | German Push |
| delivery | English Delivery | German Zustellung |
| deliveryText | English When and how we reach you. | German Wann und wie wir dich erreichen. |
| pauseAll | English Pause all notifications | German Alle Benachrichtigungen pausieren |
| pauseText | English Mute everything for a while, nothing gets lost. | German Für eine Weile alles stumm, nichts geht verloren. |
| pauseFor | English Pause for | German Pausieren für |
| quiet | English Quiet hours | German Ruhezeiten |
| quietText | English No push messages between 20:00 and 8:00 on weekdays. | German Werktags zwischen 20:00 und 8:00 keine Push-Nachrichten. |
| plan | English Current plan | German Aktuelles Paket |
| perPeriod | English per {period} | German pro {period} |
| renews | English Renews on {date} | German Verlängert sich am {date} |
| changePlan | English Change plan | German Paket wechseln |
| cancelPlan | English Cancel subscription | German Abo kündigen |
| usage | English Usage this month | German Verbrauch diesen Monat |
| usageText | English Resets on the first of each month. | German Setzt sich am Monatsersten zurück. |
| payment | English Payment method | German Zahlungsmethode |
| paymentText | English Charged automatically on the renewal date. | German Wird am Verlängerungstag automatisch belastet. |
| expires | English Expires {date} | German Gültig bis {date} |
| update | English Update | German Aktualisieren |
| invoices | English Invoices | German Rechnungen |
| invoicesText | English Download any invoice as PDF. | German Jede Rechnung als PDF herunterladen. |
| download | English Download invoice from {date} | German Rechnung vom {date} herunterladen |
| invite | English Invite people | German Personen einladen |
| inviteText | English They get an email with a link that is valid for 7 days. | German Sie bekommen eine E-Mail mit einem Link, der 7 Tage gilt. |
| inviteEmail | English Email address | German E-Mail-Adresse |
| role | English Role | German Rolle |
| send | English Send invite | German Einladung senden |
| sent | English Invite sent to {email} | German Einladung an {email} gesendet |
| invalidEmail | English Please enter a valid email address. | German Bitte gib eine gültige E-Mail-Adresse ein. |
| already | English This person is already in the team. | German Diese Person ist schon im Team. |
| members | English Members | German Mitglieder |
| seats | English {used} of {total} seats used | German {used} von {total} Plätzen belegt |
| seatsLabel | English Seats | German Plätze |
| you | English You | German Du |
| owner | English Owner | German Inhaber |
| removeMember | English Remove {name} | German {name} entfernen |
| roleOf | English Role of {name} | German Rolle von {name} |
| pending | English Pending invites | German Offene Einladungen |
| sentAgo | English Sent {when} | German Gesendet {when} |
| resend | English Resend | German Erneut senden |
| justNow | English just now | German gerade eben |
| revoke | English Revoke invite for {email} | German Einladung für {email} zurückziehen |
Accessibility
Read from the source of the component.
- Built on the native dialog element. The browser keeps focus inside and closes it with Escape.
- Sets aria-checked, aria-current, aria-describedby, aria-disabled, aria-invalid, aria-label, aria-labelledby, aria-live, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
- Uses the roles meter, region, status and switch.
- Announces changes through a live region without moving focus.
- Every field has a label, visible or for screen readers.
- Adds text for screen readers where icons and graphics stand alone.
- The server renders the starting state in full, JavaScript only adds the interaction.
Motion
- Brings animations of its own, calmly timed and without wobble.
- With reduced motion (prefers-reduced-motion) it stays still. 4 places in the code switch motion off then.
Frequent questions
How do I install Settings?
With aiw add @ai-website/settings. The command puts components/ui/settings.tsx into your project, the code is yours from then on. It brings along button and icon. It needs no further npm packages.
Which variants does Settings have?
5 variants, Profile, Account with danger zone, Notifications, Billing and Team members. You pick one with the variant prop, for example variant="account".
Can I translate the texts of Settings?
Yes. Settings carries 97 texts of its own in English and German, such as “Settings sections”, “Save changes” and “Saving…”. The language follows the KitProvider, single texts change through the labels prop.
Can an AI assistant build with Settings?
Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Settings with aiw_components and install it with aiw_add @ai-website/settings. Name the variant in your prompt, for example variant="profile", and the assistant writes your content straight into the props.
Similar components, Often combined with
Similar components
More from App, the same area of the kit.
Often combined with
Sections that usually sit next to Settings on a page.
components/ui/settings.tsx
Loading the source