Settings

Account, billing, notification, and profile settings pages.

Profile Settings

User profile edit form with avatar, display name, bio, and social links.

Preview

Profile

Manage your public profile information.

AJ

JPG, PNG or GIF. Max 2MB.

Your publicly visible name.

Lowercase letters, numbers, - and _ only.

Max 160 characters.

Profile Settings.tsx
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.

Preview

Account

Manage your account credentials and security.

Email address

Update the email address associated with your account.

We will send a verification link to the new address.

Password

Change your password to keep your account secure.

Minimum 8 characters.

Danger zone

Permanently delete your account and all associated data.

Account

Manage your account credentials and security.

Email address

Update the email address associated with your account.

We will send a verification link to the new address.

Password

Change your password to keep your account secure.

Minimum 8 characters.

Danger zone

Permanently delete your account and all associated data.

Account

Manage your account credentials and security.

Email address

Update the email address associated with your account.

We will send a verification link to the new address.

Password

Change your password to keep your account secure.

Minimum 8 characters.

Danger zone

Permanently delete your account and all associated data.

Account Settings.tsx
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.

Preview

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.

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.

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.

Notification Preferences.tsx
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.

Preview

Billing

Manage your subscription and payment details.

Pro plan

active

$29 per month

  • Unlimited projects
  • 10GB storage
  • Priority support
  • API access

Usage

Current billing period

Storage4.2 / 10 GB
API calls8400 / 10000 req/mo

Payment method

Visa ending in 4242 • Expires 12/2026

Invoice history

InvoiceDateAmountStatusAction
INV-001Mar 1, 2026$29.00
paid
INV-002Feb 1, 2026$29.00
paid
INV-003Jan 1, 2026$29.00
paid

Billing

Manage your subscription and payment details.

Pro plan

active

$29 per month

  • Unlimited projects
  • 10GB storage
  • Priority support
  • API access

Usage

Current billing period

Storage4.2 / 10 GB
API calls8400 / 10000 req/mo

Payment method

Visa ending in 4242 • Expires 12/2026

Invoice history

InvoiceDateAmountStatusAction
INV-001Mar 1, 2026$29.00
paid
INV-002Feb 1, 2026$29.00
paid
INV-003Jan 1, 2026$29.00
paid

Billing

Manage your subscription and payment details.

Pro plan

active

$29 per month

  • Unlimited projects
  • 10GB storage
  • Priority support
  • API access

Usage

Current billing period

Storage4.2 / 10 GB
API calls8400 / 10000 req/mo

Payment method

Visa ending in 4242 • Expires 12/2026

Invoice history

InvoiceDateAmountStatusAction
INV-001Mar 1, 2026$29.00
paid
INV-002Feb 1, 2026$29.00
paid
INV-003Jan 1, 2026$29.00
paid
Billing Page.tsx
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.

Preview
AJ

Alice Johnson

alice@example.com

Subscription

Current plan details

Pro
Active

Renews on 2025-03-01

Account Overview.tsx
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.

Preview

Display

Customize how the interface looks and behaves.

Appearance Settings.tsx
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.

Preview

Pro

Active

Best for growing teams.

$29/mo
monthly
Billing Overview.tsx
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.

Preview

Connected Accounts

Manage third-party accounts connected to your profile.

1 connected
G

github

alice-dev

G

google

Not connected

Connected Accounts.tsx
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.

Preview

Export Your Data

Download a copy of all your personal data in a portable format. This may take a few minutes for large accounts.

Last exported:

Data Export Card.tsx
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.

Preview
Language Settings.tsx
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.

Preview

Notification Preferences

Choose how you want to be notified about updates and activity.

Comments

Email
Push

Mentions

Email
Push
Notification Settings Card.tsx
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.

Preview

Data & Privacy

Control how we use your data.

Usage analytics

Help us improve by sharing anonymous usage data.

Marketing emails

Receive updates about new features and offers.

Crash reports

Automatically send crash reports to help fix issues.

Public profile

Make your profile visible to others.

Export your data

Download a copy of all your data.

Delete account

Permanently remove your account and all associated data.

Privacy Settings.tsx
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.

Preview

Privacy

Manage your data and account privacy settings.

Export Your Data

Download a copy of all your personal data in a portable format. This may take a few minutes for large accounts.

Delete Account

Permanently delete your account and all associated data. This action cannot be undone.

Consider exporting your data before proceeding. Once deleted, all personal information, settings, and history will be permanently removed.

Privacy Settings Layout.tsx
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.

Preview

Password

Last changed 90 days ago.

Two-factor authentication

Add an extra layer of security to your account.

Active sessions

1 device currently signed in.

MacBook Pro — Current session

San Francisco, CA • Now

Active

Password requirements

Your password must meet the following criteria.

  • At least 12 characters
  • Uppercase letter
  • Lowercase letter
  • Number
Security Settings.tsx
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.

Preview
Settings content for selected section.
Settings Layout Block.tsx
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.

Preview

Settings

Profile settings
Tabbed Settings.tsx
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.

Preview

Team members

Manage who has access to your workspace.

  • A
    Alice Johnson

    alice@example.com

    Owner
  • B
    Bob Smith

    bob@example.com

    Admin
  • C
    Carol White

    carol@example.com

    Member
Team Settings.tsx
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.

Preview

Delete Account

Permanently delete your account and all associated data. This action cannot be undone.

Consider exporting your data before proceeding. Once deleted, all personal information, settings, and history will be permanently removed.

Account Deletion Card.tsx
import { AccountDeletionCard } from "@launchapp/design-system/blocks/settings";export default function Page() {  return (    <AccountDeletionCard      onDelete={async (confirmation) => console.log("delete account", confirmation)}    />  );}

Data Export Panel

Settings panel for requesting and downloading data exports in multiple formats.

Preview

Export Your Data

Download a copy of your data in various formats.

Export History

  • All data — JSON
    Ready
    Jan 1, 2024, 10:00 AM1000.0 KB
  • Account & profile — CSV
    Ready
    Jan 5, 2024, 02:00 PM200.0 KB
Data Export Panel.tsx
import { DataExportPanel } from "@launchapp/design-system/blocks/settings";export default function Page() {  return (    <DataExportPanel      title="Export Your Data"      onRequestExport={(format, scope) => console.log("export", format, scope)}      onDownload={(item) => console.log("download", item.id)}    />  );}
← PreviousDashboard
Next →Navigation