Organization Switcher

Dropdown component to switch between organizations/workspaces. Shows org name, avatar, role badge, and member count.

Preview

Features

Card-style trigger button with org avatar, name, role badge
Member count displayed in trigger and dropdown items
Role badges: Owner (amber), Admin (red), Member (blue), Viewer (gray)
Avatar with initials (first letters of org name)
Check indicator for currently selected organization
Selected org avatar highlighted with primary color
"Create new organization" action at bottom
Dropdown aligned to start with 288px width

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
organization-switcher.tsx	components/user-management/organization-switcher/organization-switcher.tsx
types.ts	components/user-management/organization-switcher/types.ts
index.ts	components/user-management/organization-switcher/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npx shadcn@latest add button popover

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. organization-switcher.tsx

organization-switcher.tsx

tsx

"use client";

import { CaretDown as ChevronDown, Check, Plus } from "@phosphor-icons/react";
import { Button } from "@/components/ui/button";
import {

2. types.ts

types.ts

tsx

export type OrgRole = "owner" | "admin" | "member" | "viewer";

export interface Organization {
  id: string;
  name: string;

3. index.ts

index.ts

tsx

export { OrganizationSwitcher } from "./organization-switcher";
export type {
  Organization,
  OrgRole,
  OrganizationSwitcherProps,
} from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/layout.tsx

tsx

import { useState } from "react";
import { OrganizationSwitcher, type Organization } from "@/components/user-management";

export default function DashboardLayout() {
  const [currentOrgId, setCurrentOrgId] = useState("org_1");

OrganizationSwitcher Props

Prop	Type	Default
organizations	Organization[]	required
currentOrgId	string	required
onSelect	(orgId: string) => void	required
onCreateOrg	() => void	-