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

Section	Description
`profile`	User profile — name, email, language, country, currency, and timezone.
`security`	Account security — password, passkeys, and active session management.
`devices`	Signed-in devices — rename a device, sign it out, or forget it.
`connected-agents`	Connected OAuth2 agents (e.g. MCP clients) — view connections and revoke access.
`general`	Workspace name, icon, and billing currency.
`users`	Invite members, assign roles, view seat usage bar, and remove members.
`subscription`	Current plan details, change plan, cancel or resume subscription, and view invoices.
`usage`	Per-quota progress bars showing current consumption and overage costs.
`credits`	Credit balance, purchase packages, transaction history, and expiring credits.
`features`	Toggle workspace-scoped feature flags on or off.
`notifications`	Push subscription toggle and per-event email/push notification preferences.
`permissions`	Role-permission matrix with toggle switches for granular access control.
`danger`	Delete 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();
}

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.