Overview
A functional organization switcher using useOrganizationList(), useOrganization(), and useUser() hooks. Shows the active organization with a dropdown to switch between orgs.
Installation
npx shadcn@latest add "https://elements.crfrst.dev/r/clerk-org-switcher"Usage
import { ClerkOrgSwitcher } from "@/components/elements/clerk-org-switcher";
export function Sidebar() {
return <ClerkOrgSwitcher />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Custom CSS classes |
showPersonalAccount | boolean | true | Show personal account option |
Features
- Personal account and organization list from hooks
- Role badges (Owner/Admin/Member)
- Active organization indicator
- Switch orgs via
setActive() - Loading skeleton while data loads
- Click-outside-to-close behavior