Einstellungsseiten für React-Apps
Einstellungsseiten mit Bereichsspalte, Karten je Thema und einer Speicherleiste, die bei Änderungen erscheint.
5 Variants
Kategorie wechseln
Marketing
- Hero17
- Features15
- Logo Clouds8
- Stats8
- Pricing11
- Testimonials11
- Call to Action11
- FAQ7
- Newsletter12
- Banners9
- Popups und Consent7
- Services7
- Use Cases6
- Security und Trust7
- Changelog und Roadmap6
- Launch und Waitlist6
- Product Tour6
- Press und Awards10
- AI Features6
- App Download5
- Spenden und Unterstützen4
- Problem und Lösung5
- Einwände5
- Rechner10
- Quiz und Produktberater5
- Kostenlos testen5
- Empfehlung und Partner10
- Community5
- Open Source5
- Manifest5
- Angebot5
- Lead-Magnet4
- Scroll-Geschichten20
- Scroll-Reisen13
- Scroll-Effekte13
- Scroll-Reveals und Übergänge15
Content
- Blog16
- Gallery7
- Team8
- About11
- Content8
- Process7
- Contact8
- Comparison5
- Integrations5
- Error Pages5
- Careers7
- Case Studies6
- Portfolio6
- Events und Webinars6
- Help Center6
- Rechtstexte5
- Dokumentation4
- Suchergebnisse5
- Ressourcen und Downloads4
- Podcast4
- Redaktion15
- Autoren und Interviews10
- Glossar5
- Rezepte5
- Datengeschichten10
- Long Reads5
- Umfragen und Feedback14
- Formularzustände12
- Anfrageformulare16
- Bewerbungen und Anmeldungen13
- Adresse, Zahlung und Einwilligung12
App
- Auth9
- Dashboards6
- Tables6
- Settings5
- AI und Chat16
- Calendar5
- Inbox und Messages5
- Notifications6
- Files6
- Projects6
- Profiles6
- Onboarding6
- Billing und Usage10
- Developer Settings15
- Security und Zugriff10
- Import, Export und Verlauf15
- Automation und Builder14
- KI-Antworten18
- KI-Schreiben und Erstellen13
- KI-Einrichtung14
- KI-Assistenten9
E-Commerce
Industries
- Menus7
- Appointments6
- Listings6
- Courses6
- Rooms und Stays5
- Classes und Schedules6
- Arztpraxis5
- Kanzlei5
- Salon und Spa5
- Autohaus5
- Reisen5
- Sportverein5
- Coworking5
- Museum5
- Kino5
- Schule5
- Handwerk5
- Versicherung5
- Bank5
- Personal Brand15
- Speaker und Media Kits10
- Creator15
- Coaching und Beratung10
- Kunst und Musik15
- Zahnarztpraxis5
- Tierarztpraxis5
- Therapiepraxis5
- Hochzeiten und Events5
- Architekturbüro5
- Steuerberatung5
- Immobilienmakler5
- Blumenladen5
- Weingut5
- Kita5
- Fahrschule5
- Pflege5
- Festival5
Elements
- Buttons20
- Forms und Inputs22
- Picker und Auswahlfelder21
- Spezielle Eingabefelder20
- Cards10
- Overlays21
- Navigation15
- Menüleisten und Umschalter14
- Data Display15
- Fortschritt und Zustände13
- Listen, Bäume und Timelines17
- Charts22
- Vergleichs-Charts22
- Statistik-Charts20
- KPI-, Live- und Karten-Charts22
- Text Effects15
- Textakzente16
- Backgrounds19
- Beams, Partikel und Bewegung18
- Media19
- Code und JSON8
- Panels und Splitter4
Profil, Konto, Abrechnung und Team
Einstellungen besucht man selten, und oft verwirren sie. Sie brauchen deshalb eine ruhige Struktur. Die fünf Seiten hier stellen die Abschnitte links in eine Spalte, gruppieren Felder in Cards je Thema und zeigen eine Speicherleiste nur dann, wenn sich etwas geändert hat.
„Profil“ bearbeitet Name, Bild und öffentliche Angaben. „Konto mit Gefahrenzone“ regelt E-Mail, Passwort und das Löschen des Kontos, mit einer Bestätigung, die nach dem Namen fragt. „Benachrichtigungen“ schaltet Kanäle und Themen mit echten Switches. „Abrechnung“ zeigt Plan, Zahlungsart und Rechnungen, „Teammitglieder“ lädt Personen ein und vergibt Rollen.
Speichere so, dass es klar ist, sofort per Switch oder mit der Speicherleiste für Formulare, aber nie gemischt in einer Card. Stell zerstörende Aktionen ans Ende und in eine eigene Card. Jedes Feld behält sein sichtbares Label, Platzhalter verschwinden beim Tippen.
Einstellungen
Details
Was Einstellungen mitbringt, aus Registry und Quellcode gelesen.
- Bereich
- App
- Variants
- 5
- Version
- 1.0.2 · seit 1.0.0
- Datei
- components/ui/settings.tsx
- npm-Pakete
- Keine
- Sprachen
- Englisch und Deutsch, 97 eigene Texte
- Studio
- Im Code anpassen
- In Sammlungen
- App-Dashboard
- Mit KI bauen
- Per MCP in Claude, Cursor, Copilot und Codex
Props
Die Schnittstelle SettingsProps aus components/ui/settings.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.
variantoptionalSettingsVariantprofileaccountnotificationsbillingteam-members
titleoptionalstringdescriptionoptionalstringnavPflichtSettingsNavItem[]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.
Eingebaute Texte
Diese Texte schreibt Einstellungen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.
Alle 97 Texte anzeigen
| Schlüssel | Englisch | Deutsch |
|---|---|---|
| sections | Englisch Settings sections | Deutsch Bereiche der Einstellungen |
| save | Englisch Save changes | Deutsch Änderungen speichern |
| saving | Englisch Saving… | Deutsch Wird gespeichert… |
| saved | Englisch Saved | Deutsch Gespeichert |
| discard | Englisch Discard | Deutsch Verwerfen |
| unsaved | Englisch You have unsaved changes | Deutsch Du hast ungespeicherte Änderungen |
| avatar | Englisch Profile picture | Deutsch Profilbild |
| avatarHint | Englisch Square, at least 400 px. JPG, PNG or WebP. | Deutsch Quadratisch, mindestens 400 px. JPG, PNG oder WebP. |
| upload | Englisch Upload new | Deutsch Neues hochladen |
| remove | Englisch Remove | Deutsch Entfernen |
| name | Englisch Name | Deutsch Name |
| nameHint | Englisch Shown on your profile and in mentions. | Deutsch Steht in deinem Profil und bei Erwähnungen. |
| username | Englisch Username | Deutsch Benutzername |
| bio | Englisch About you | Deutsch Über dich |
| bioHint | Englisch {n} characters left | Deutsch Noch {n} Zeichen |
| website | Englisch Website | Deutsch Website |
| Englisch Email | Deutsch E-Mail | |
| publicProfile | Englisch Public profile | Deutsch Öffentliches Profil |
| publicProfileText | Englisch This is how other people see you in comments and on shared pages. | Deutsch So sehen dich andere in Kommentaren und auf geteilten Seiten. |
| emailSection | Englisch Email address | Deutsch E-Mail-Adresse |
| emailText | Englisch Used for sign-in and important messages. We confirm a new address before it is used. | Deutsch Für die Anmeldung und wichtige Nachrichten. Eine neue Adresse bestätigen wir, bevor sie gilt. |
| change | Englisch Change | Deutsch Ändern |
| password | Englisch Password | Deutsch Passwort |
| passwordText | Englisch Last changed 4 months ago. | Deutsch Zuletzt vor 4 Monaten geändert. |
| current | Englisch Current password | Deutsch Aktuelles Passwort |
| newPassword | Englisch New password | Deutsch Neues Passwort |
| updatePassword | Englisch Update password | Deutsch Passwort ändern |
| language | Englisch Language | Deutsch Sprache |
| languageText | Englisch For the interface and emails. | Deutsch Für Oberfläche und E-Mails. |
| sessions | Englisch Active sessions | Deutsch Aktive Sitzungen |
| sessionsText | Englisch Devices that are signed in right now. | Deutsch Geräte, die gerade angemeldet sind. |
| thisDevice | Englisch This device | Deutsch Dieses Gerät |
| signOut | Englisch Sign out | Deutsch Abmelden |
| signOutAll | Englisch Sign out everywhere else | Deutsch Überall sonst abmelden |
| signedOut | Englisch Signed out | Deutsch Abgemeldet |
| danger | Englisch Danger zone | Deutsch Gefahrenzone |
| dangerText | Englisch These actions cannot be undone. Please be sure. | Deutsch Diese Schritte lassen sich nicht rückgängig machen. Bitte sei dir sicher. |
| export | Englisch Export all data | Deutsch Alle Daten exportieren |
| exportText | Englisch A ZIP with every project, file and comment. | Deutsch Ein ZIP mit allen Projekten, Dateien und Kommentaren. |
| exportBtn | Englisch Request export | Deutsch Export anfordern |
| deleteWs | Englisch Delete workspace | Deutsch Arbeitsbereich löschen |
| deleteText | Englisch Removes {name} with all projects for everyone. | Deutsch Entfernt {name} mit allen Projekten für alle. |
| deleteConfirm | Englisch Type {name} to confirm | Deutsch Zur Bestätigung {name} eingeben |
| deleteFinal | Englisch Delete forever | Deutsch Endgültig löschen |
| cancel | Englisch Cancel | Deutsch Abbrechen |
| deleteTitle | Englisch Delete {name}? | Deutsch {name} löschen? |
| deleteBody | Englisch All projects, files and members are removed after 7 days. You can restore the workspace until then. | Deutsch Alle Projekte, Dateien und Mitglieder werden nach 7 Tagen entfernt. Bis dahin kannst du den Arbeitsbereich wiederherstellen. |
| deleted | Englisch Deletion scheduled. You can undo it for 7 days. | Deutsch Löschung geplant. Du kannst sie 7 Tage lang rückgängig machen. |
| cancelTitle | Englisch Cancel your subscription? | Deutsch Abo wirklich kündigen? |
| cancelBody | Englisch {plan} stays active until {date}. After that the workspace moves to the free plan, nothing is deleted. | Deutsch {plan} bleibt bis {date} aktiv. Danach wechselt der Arbeitsbereich ins kostenlose Paket, gelöscht wird nichts. |
| keepPlan | Englisch Keep plan | Deutsch Paket behalten |
| cancelled | Englisch Cancelled. {plan} stays active until {date}. | Deutsch Gekündigt. {plan} bleibt bis {date} aktiv. |
| undoCancel | Englisch Resume subscription | Deutsch Abo fortsetzen |
| channel | Englisch Channel | Deutsch Kanal |
| emailCol | Englisch Email | Deutsch E-Mail |
| pushCol | Englisch Push | Deutsch Push |
| delivery | Englisch Delivery | Deutsch Zustellung |
| deliveryText | Englisch When and how we reach you. | Deutsch Wann und wie wir dich erreichen. |
| pauseAll | Englisch Pause all notifications | Deutsch Alle Benachrichtigungen pausieren |
| pauseText | Englisch Mute everything for a while, nothing gets lost. | Deutsch Für eine Weile alles stumm, nichts geht verloren. |
| pauseFor | Englisch Pause for | Deutsch Pausieren für |
| quiet | Englisch Quiet hours | Deutsch Ruhezeiten |
| quietText | Englisch No push messages between 20:00 and 8:00 on weekdays. | Deutsch Werktags zwischen 20:00 und 8:00 keine Push-Nachrichten. |
| plan | Englisch Current plan | Deutsch Aktuelles Paket |
| perPeriod | Englisch per {period} | Deutsch pro {period} |
| renews | Englisch Renews on {date} | Deutsch Verlängert sich am {date} |
| changePlan | Englisch Change plan | Deutsch Paket wechseln |
| cancelPlan | Englisch Cancel subscription | Deutsch Abo kündigen |
| usage | Englisch Usage this month | Deutsch Verbrauch diesen Monat |
| usageText | Englisch Resets on the first of each month. | Deutsch Setzt sich am Monatsersten zurück. |
| payment | Englisch Payment method | Deutsch Zahlungsmethode |
| paymentText | Englisch Charged automatically on the renewal date. | Deutsch Wird am Verlängerungstag automatisch belastet. |
| expires | Englisch Expires {date} | Deutsch Gültig bis {date} |
| update | Englisch Update | Deutsch Aktualisieren |
| invoices | Englisch Invoices | Deutsch Rechnungen |
| invoicesText | Englisch Download any invoice as PDF. | Deutsch Jede Rechnung als PDF herunterladen. |
| download | Englisch Download invoice from {date} | Deutsch Rechnung vom {date} herunterladen |
| invite | Englisch Invite people | Deutsch Personen einladen |
| inviteText | Englisch They get an email with a link that is valid for 7 days. | Deutsch Sie bekommen eine E-Mail mit einem Link, der 7 Tage gilt. |
| inviteEmail | Englisch Email address | Deutsch E-Mail-Adresse |
| role | Englisch Role | Deutsch Rolle |
| send | Englisch Send invite | Deutsch Einladung senden |
| sent | Englisch Invite sent to {email} | Deutsch Einladung an {email} gesendet |
| invalidEmail | Englisch Please enter a valid email address. | Deutsch Bitte gib eine gültige E-Mail-Adresse ein. |
| already | Englisch This person is already in the team. | Deutsch Diese Person ist schon im Team. |
| members | Englisch Members | Deutsch Mitglieder |
| seats | Englisch {used} of {total} seats used | Deutsch {used} von {total} Plätzen belegt |
| seatsLabel | Englisch Seats | Deutsch Plätze |
| you | Englisch You | Deutsch Du |
| owner | Englisch Owner | Deutsch Inhaber |
| removeMember | Englisch Remove {name} | Deutsch {name} entfernen |
| roleOf | Englisch Role of {name} | Deutsch Rolle von {name} |
| pending | Englisch Pending invites | Deutsch Offene Einladungen |
| sentAgo | Englisch Sent {when} | Deutsch Gesendet {when} |
| resend | Englisch Resend | Deutsch Erneut senden |
| justNow | Englisch just now | Deutsch gerade eben |
| revoke | Englisch Revoke invite for {email} | Deutsch Einladung für {email} zurückziehen |
Barrierefreiheit
Aus dem Quellcode der Component abgeleitet.
- Baut auf dem nativen dialog-Element auf. Der Browser hält den Fokus im Fenster und schließt es mit Escape.
- Setzt aria-checked, aria-current, aria-describedby, aria-disabled, aria-invalid, aria-label, aria-labelledby, aria-live, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
- Nutzt die Rollen meter, region, status und switch.
- Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
- Jedes Feld hat ein Label, sichtbar oder für Screenreader.
- Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
- Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.
Bewegung
- Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
- Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 4 Stellen im Code schalten Bewegung dann ab.
Häufige Fragen
Wie installiere ich Einstellungen?
Mit aiw add @ai-website/settings. Der Befehl legt die Datei components/ui/settings.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button und icon. Weitere npm-Pakete braucht sie nicht.
Welche Varianten hat Einstellungen?
5 Varianten, Profil, Konto mit Gefahrenzone, Benachrichtigungen, Abrechnung und Teammitglieder. Du wählst sie mit der Prop variant, zum Beispiel variant="account".
Kann ich die Texte von Einstellungen übersetzen?
Ja. Einstellungen bringt 97 eigene Texte auf Deutsch und Englisch mit, etwa „Bereiche der Einstellungen“, „Änderungen speichern“ und „Wird gespeichert…“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.
Kann ein KI-Assistent Einstellungen einbauen?
Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Einstellungen mit aiw_components und installieren sie mit aiw_add @ai-website/settings. Nenn im Prompt die Variante, etwa variant="profile", dann schreibt der Assistent deine Inhalte direkt in die Props.
Ähnliche Components, Wird oft kombiniert mit
Ähnliche Components
Mehr aus App, demselben Bereich des Kits.
Wird oft kombiniert mit
Sections, die auf einer Seite meist neben Settings stehen.
components/ui/settings.tsx
Quellcode lädt