Better Auth UI

The <OrganizationSwitcher> is a comprehensive component that provides organization and personal account switching functionality. It displays the currently active organization or personal account and allows users to switch between them, create new organizations, and manage their organization settings.

Usage

import { OrganizationSwitcher } from '@daveyplate/better-auth-ui'

export function Header() {
  return (
    <nav>
      <OrganizationSwitcher />
    </nav>
  )
}

Features

Organization Selection: Switch between different organizations
Personal Account: Switch back to personal account
Create Organization: Create new organizations directly from the switcher
Organization Settings: Quick access to organization settings
Responsive Design: Adapts to different screen sizes
Custom Trigger: Use your own trigger element

Reference

Prop	Type	Default
`onSetActive?`	`((organizationId: string \| null) => void)`	-
`localization?`	`Partial<{ INVALID_USERNAME_OR_PASSWORD: string; EMAIL_NOT_VERIFIED: string; UNEXPECTED_ERROR: string; USERNAME_IS_ALREADY_TAKEN: string; USERNAME_TOO_SHORT: string; USERNAME_TOO_LONG: string; ... 355 more ...; SLUG_DOES_NOT_MATCH: string; }>`	-
`trigger?`	`any`	-
`align?`	`"center" \| "start" \| "end"`	-
`classNames?`	`OrganizationSwitcherClassNames`	-

Examples

Basic Usage

<OrganizationSwitcher />

With Custom Size

<OrganizationSwitcher size="icon" />

With Custom Alignment

<OrganizationSwitcher align="start" />

With Custom Trigger

import { Button } from '@/components/ui/button'

<OrganizationSwitcher 
  trigger={
    <Button variant="outline">
      Switch Organization
    </Button>
  }
/>

With onSetActive Callback

<OrganizationSwitcher 
  onSetActive={(organizationId) => {
    console.log('Switched to:', organizationId)
  }}
/>

With Custom Localization

<OrganizationSwitcher 
  localization={{
    ORGANIZATION: "Team",
    CREATE_ORGANIZATION: "Create Team",
    PERSONAL_ACCOUNT: "Personal Workspace"
  }}
/>

With Custom Class Names

<OrganizationSwitcher 
  classNames={{
    trigger: {
      base: "bg-primary text-primary-foreground",
      avatar: {
        base: "size-8"
      }
    },
    content: {
      base: "w-80",
      menuItem: "gap-3"
    }
  }}
/>

Behavior

Initial State: Shows the active organization or personal account
Loading State: Displays skeleton loader while fetching data
Empty State: Shows "Sign In" option when not authenticated
Error Handling: Displays toast notifications for errors
Automatic Updates: Refreshes when organization changes

Requirements

The OrganizationSwitcher requires the organization plugin to be configured in your auth client:

providers.tsx

<AuthUIProvider
  authClient={authClient}
  organization={{
    logo: true,
    customRoles: [
      { role: "developer", label: "Developer" },
      { role: "viewer", label: "Viewer" }
    ]
  }}
>
  {children}
</AuthUIProvider>

<OrganizationSwitcher>

On this page