Settings
Account, billing, notification, and profile settings pages.
Profile Settings
User profile edit form with avatar, display name, bio, and social links.
Profile
Manage your public profile information.
JPG, PNG or GIF. Max 2MB.
import { ProfileSettings } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <ProfileSettings onSave={async (values) => { console.log(values); }} /> );}Account Settings
Account preferences including email change, password update, and danger zone.
Account
Manage your account credentials and security.
Email address
Update the email address associated with your account.
Password
Change your password to keep your account secure.
Danger zone
Permanently delete your account and all associated data.
import { AccountSettings } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <AccountSettings onEmailChange={async (values) => console.log(values)} onPasswordChange={async (values) => console.log(values)} onDeleteAccount={() => console.log("delete account")} /> );}Notification Preferences
Granular notification toggle controls grouped by category.
Notification preferences
Choose what you want to be notified about.
Email notifications
News about new features and improvements.
Sign-ins, password changes, and security alerts.
Special offers, deals, and newsletters.
A summary of your activity each week.
Push notifications
When someone mentions you in a comment.
Replies to your comments and posts.
Scheduled reminders and due-date alerts.
In-app notifications
Show a badge for all new notifications.
Notify when you receive a new direct message.
Maintenance windows and service updates.
import { NotificationPreferences } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <NotificationPreferences onSave={async (values) => { console.log(values); }} /> );}Billing Page
Subscription plan comparison, usage meters, payment methods, and invoices.
Billing
Manage your subscription and payment details.
Pro plan
$29 per month
- Unlimited projects
- 10GB storage
- Priority support
- API access
Usage
Current billing period
Payment method
Visa ending in 4242 • Expires 12/2026
Invoice history
| Invoice | Date | Amount | Status | Action |
|---|---|---|---|---|
| INV-001 | Mar 1, 2026 | $29.00 | paid | |
| INV-002 | Feb 1, 2026 | $29.00 | paid | |
| INV-003 | Jan 1, 2026 | $29.00 | paid |
import { BillingPage } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <BillingPage currentPlan="pro" onUpgrade={(plan) => console.log("upgrade to", plan)} onManagePayment={() => console.log("manage payment")} /> );}Account Overview
Account summary card with user info, plan status, and quick actions.
No preview available
See the code snippet below for usage.
import { AccountOverview } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <AccountOverview user={{ name: "Alice Johnson", email: "alice@example.com", fallbackInitials: "AJ" }} plan={{ name: "Pro", status: "active", renewsAt: "2025-01-01" }} onEditProfile={() => console.log("edit")} onManageBilling={() => console.log("billing")} /> );}Appearance Settings
Theme, color scheme, font, and density preferences panel.
No preview available
See the code snippet below for usage.
import { AppearanceSettings } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <AppearanceSettings onSave={(appearance) => console.log("save appearance", appearance)} /> );}Billing Overview
Current plan summary with renewal date, usage stats, and upgrade CTA.
No preview available
See the code snippet below for usage.
import { BillingOverview } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <BillingOverview plan={{ name: "Pro", status: "active", price: "$29/mo", renewsAt: "2025-03-01" }} onUpgrade={() => console.log("upgrade")} onManage={() => console.log("manage")} /> );}Connected Accounts
Manage OAuth provider connections — connect, disconnect, and view scopes.
No preview available
See the code snippet below for usage.
import { ConnectedAccounts } from "@launchapp/design-system/blocks/settings";const accounts = [ { id: "github", provider: "github", name: "GitHub", username: "alice-dev", connected: true, scopes: ["repo", "user"] }, { id: "google", provider: "google", name: "Google", connected: false },];export default function Page() { return ( <ConnectedAccounts accounts={accounts} onConnect={(provider) => console.log("connect", provider)} onDisconnect={(id) => console.log("disconnect", id)} /> );}Data Export Card
Card for requesting a full account data export in various formats.
No preview available
See the code snippet below for usage.
import { DataExportCard } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <DataExportCard onExport={(format) => console.log("export", format)} lastExportDate="2024-01-01" /> );}Language Settings
Language, locale, and timezone preferences settings panel.
No preview available
See the code snippet below for usage.
import { LanguageSettings } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <LanguageSettings onSave={(settings) => console.log("save", settings)} /> );}Notification Settings Card
Card with grouped notification channel toggles for email, push, and in-app.
No preview available
See the code snippet below for usage.
import { NotificationSettingsCard } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <NotificationSettingsCard onSave={(settings) => console.log("save", settings)} /> );}Privacy Settings
Privacy toggles for data sharing, analytics, and personalization.
No preview available
See the code snippet below for usage.
import { PrivacySettings } from "@launchapp/design-system/blocks/settings";const toggles = [ { id: "analytics", label: "Usage Analytics", description: "Share usage data to improve the product.", enabled: true }, { id: "marketing", label: "Marketing Emails", description: "Receive product updates and offers.", enabled: false },];export default function Page() { return ( <PrivacySettings toggles={toggles} onToggle={(id, value) => console.log(id, value)} /> );}Privacy Settings Layout
Full privacy settings page with consent history, data export, and account deletion.
No preview available
See the code snippet below for usage.
import { PrivacySettingsLayout } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <PrivacySettingsLayout onExportData={() => console.log("export")} onDeleteAccount={() => console.log("delete account")} /> );}Security Settings
Password change, two-factor authentication, and session management.
No preview available
See the code snippet below for usage.
import { SecuritySettings } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <SecuritySettings hasTwoFactor={false} onChangePassword={async (current, next) => console.log("change password")} onEnableTwoFactor={() => console.log("enable 2fa")} onRevokeSession={(id) => console.log("revoke session", id)} /> );}Settings Layout Block
Two-column settings page layout with navigation sidebar and content area.
No preview available
See the code snippet below for usage.
import { SettingsLayoutBlock } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <SettingsLayoutBlock activeSection="profile" onSectionChange={(id) => console.log("section", id)} > <div>Settings content for active section</div> </SettingsLayoutBlock> );}Tabbed Settings
Settings page with horizontal tab navigation for different setting groups.
No preview available
See the code snippet below for usage.
import { TabbedSettings } from "@launchapp/design-system/blocks/settings";const tabs = [ { id: "profile", label: "Profile", content: <div>Profile settings</div> }, { id: "account", label: "Account", content: <div>Account settings</div> }, { id: "notifications", label: "Notifications", content: <div>Notification settings</div> },];export default function Page() { return <TabbedSettings tabs={tabs} />;}Team Settings
Team management settings with member list, roles, and invite controls.
No preview available
See the code snippet below for usage.
import { TeamSettings } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <TeamSettings onInvite={(email, role) => console.log("invite", email, role)} onRemoveMember={(id) => console.log("remove", id)} onChangeRole={(id, role) => console.log("change role", id, role)} /> );}Account Deletion Card
Danger zone card for permanently deleting an account with confirmation.
No preview available
See the code snippet below for usage.
import { AccountDeletionCard } from "@launchapp/design-system/blocks/settings";export default function Page() { return ( <AccountDeletionCard onDelete={async (confirmation) => console.log("delete account", confirmation)} /> );}