OrganizationSwitcher
Allow users to switch between organizations they belong to with a dropdown menu.
Live Demo
Organization Switcher Example
Click the dropdown to switch between organizations
Installation
Basic Usage
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| currentOrganizationId | string | - | ID of the currently active organization |
| onOrganizationSelect | (org: any) => void | - | Callback fired when a different organization is selected |
| afterSelectOrganizationUrl | string | (org: any) => string | '/dashboard' | URL or function to redirect after selecting an organization |
| showCreateButton | boolean | true | Show "Create New Organization" button |
| showMemberCount | boolean | true | Display member count for each organization |
| showSearch | boolean | true | Show search input in dropdown |
| className | string | - | Additional CSS classes for container |
| buttonClassName | string | - | Custom CSS classes for trigger button |
| dropdownClassName | string | - | Custom CSS classes for dropdown menu |
Custom Styling
Direct API Usage
You can also manage organization switching directly via the API:
Features
Search & Filter
Quickly find organizations with built-in search functionality
Role Badges
Display user's role in each organization (Owner, Admin, Member)
Quick Create
Create new organizations directly from the switcher
Active Indicator
Visual indicator showing which organization is currently active
Common Use Cases
B2B SaaS Applications
Allow users to switch between different company accounts they belong to (e.g., consultant working with multiple clients)
Team Collaboration Tools
Users can switch between personal workspace and team workspaces
Multi-Tenant Platforms
Manage multiple tenants/organizations with isolated data and settings