Account Switcher

The account switcher lets users navigate between their personal account and organizations. It appears in the sidebar and updates the application context without changing the URL path.

The account switcher is a sidebar dropdown that lets users navigate between personal and organization accounts without changing the URL path. When a user selects an account, the application context updates and redirects to that account's dashboard. All pages then reflect the selected account's data through workspace hooks.

The account switcher is a context-aware dropdown component (DashboardDropdown) that manages active account selection. It stores the selected account in application state, enabling multi-tenant navigation without URL-based routing.

How It Works

1. User clicks the account switcher in the sidebar
2. Dropdown shows available accounts (personal + organizations)
3. User selects an account
4. Application context updates with the new active account
5. User is redirected to the dashboard of the selected account
6. All pages now reflect the selected account's data

The dropdown displays:

Behavior by Account Mode

Configure modes in Account Modes.

Search Functionality

Users with many organizations can search by name using the built-in search field. The search filters the dropdown list in real-time.

Avatars and Display

• Organizations: Show configured logo or fallback to first letter of name
• Personal accounts: Show user's profile picture or default icon
• Active account: Highlighted with a checkmark

Accessing Current Account in Code

After switching, access the active account using workspace hooks:

// In organization pages
import { useTeamAccountWorkspace } from '@kit/team-accounts/hooks/use-team-account-workspace';
function TeamPage() {
  const { account } = useTeamAccountWorkspace();
  // account.id = active organization ID
  // account.name = organization name
}

Common Pitfalls

• Forgetting context updates aren't instant: After switching, the page redirects. Don't expect state to update in the current render.
• Using wrong workspace hook: Use useTeamAccountWorkspace() for organization pages, useUserWorkspace() for personal account pages.
• Expecting URL changes: The account switcher updates application state, not the URL path. Routes stay the same (/dashboard, /settings).

Next: Settings →