<OrganizationSwitcher />

The OrganizationSwitcher component renders a dropdown that allows users to switch between their organizations in multi-tenant B2B applications. It displays the current organization as the trigger and lists all organizations the user belongs to in the panel.

Usage

Basic Usage

src/Header.vue

<script setup>
import { OrganizationSwitcher } from '@thunderid/vue'
</script>

<template>
  <header>
    <OrganizationSwitcher />
  </header>
</template>

Custom Styling

Apply a custom class to the root element:

src/Header.vue

<script setup>
import { OrganizationSwitcher } from '@thunderid/vue'
</script>

<template>
  <OrganizationSwitcher class-name="header-org-switcher" />
</template>

Props

Prop	Type	Required	Description
className	string	❌	Extra CSS class added to the root element