BuildBaseBuildBase

Settings Screens

Pre-built settings for profile, members, billing, usage, features, and more.

Call openWorkspaceSettings() to open a full settings dialog. One function replaces months of UI work across 13 screens.

import { useSaaSAuth } from '@buildbase/sdk/react';

function SettingsButton() {
  const { openWorkspaceSettings } = useSaaSAuth();

  return (
    <button onClick={() => openWorkspaceSettings('subscription')}>
      Manage Subscription
    </button>
  );
}

Pass a section name to open directly to that screen, or call with no arguments to open the default (profile) screen.

import { useSaaSAuth } from '@buildbase/sdk/react';

function SettingsNav() {
  const { openWorkspaceSettings } = useSaaSAuth();

  return (
    <div className="flex flex-col gap-2">
      <button onClick={() => openWorkspaceSettings()}>General Settings</button>
      <button onClick={() => openWorkspaceSettings('users')}>Members</button>
      <button onClick={() => openWorkspaceSettings('subscription')}>
        Billing
      </button>
      <button onClick={() => openWorkspaceSettings('danger')}>
        Danger Zone
      </button>
    </div>
  );
}

Available screens

SectionDescription
profileUser profile - name, email, username, language, country, currency, and timezone.
securityPassword, phone number, two-step sign-in, connected accounts, passkeys, and deleting the account.
devicesSigned-in devices - rename a device, sign it out, or forget it.
connected-agentsConnected OAuth2 agents (e.g. MCP clients) - view connections and revoke access.
generalWorkspace name, icon, and billing currency.
usersInvite members by email (account or not), see pending invitations, assign roles, view seat usage bar, and remove members.
subscriptionCurrent plan details, change plan, cancel or resume subscription, and view invoices.
usagePer-quota progress bars showing current consumption and overage costs.
creditsCredit balance, purchase packages, transaction history, and expiring credits.
featuresToggle workspace-scoped feature flags on or off.
notificationsPush subscription toggle and per-event email/push notification preferences.
permissionsRole-permission matrix with toggle switches for granular access control.
dangerDelete the workspace with a confirmation step.

Opening specific screens

The openWorkspaceSettings function accepts any section name from the table above:

import { useSaaSAuth } from '@buildbase/sdk/react';

function SettingsExample() {
  const { openWorkspaceSettings } = useSaaSAuth();

  // Open to usage tracking
  openWorkspaceSettings('usage');

  // Open to the default (profile) screen
  openWorkspaceSettings();
}

Note

From @buildbase/sdk 0.0.71 on a server from release 22 , the notifications screen is each member's own: "Your notifications" over the workspace defaults, which admins set on the same screen. Older SDKs edit the workspace defaults for everyone.

Tip

These screens replace months of UI work. They handle loading states, error messages, and permission checks automatically.

Built-in capabilities

Every settings screen includes:

  • Permission gating - Screens and actions are hidden or disabled based on the user's role. A viewer cannot access the danger zone or change permissions.
  • Translations - All screens are translated into 8 languages. The active language is determined by the user's profile or browser locale.
  • Responsive layout - Screens adapt to mobile, tablet, and desktop viewports.
  • Loading and error states - Skeleton loaders during data fetch, inline error messages on failure, and retry buttons where applicable.

Next Steps

  • Billing Overview - Set up plans, subscriptions, and payment processing for your workspaces.