Team Switcher

Location: sabo/src/components/dashboard/team-switcher.tsx

When to use

Let users quickly switch team/project context without leaving the dashboard.

Usage

// Used in sidebar header (app-sidebar.tsx)
import { TeamSwitcher } from "@/components/dashboard/team-switcher";

export function AppSidebar() {
  const teams = [
    { name: "Acme Inc", logo: GalleryVerticalEnd, plan: "Enterprise" },
    // ... more teams
  ];

  return (
    <Sidebar>
      <SidebarHeader>
        <TeamSwitcher teams={teams} />
      </SidebarHeader>
      {/* ... sidebar content */}
    </Sidebar>
  );
}

Styling tip

The switcher appears at the top of the sidebar with team logo, name, and plan displayed.

Steps

Provide teams array

Define teams with name, logo (React component), and plan fields. Can be static or fetched from Supabase.

const teams = [
  { name: "Acme Inc", logo: GalleryVerticalEnd, plan: "Enterprise" },
  { name: "Acme Corp.", logo: AudioWaveform, plan: "Startup" },
];

Handle selection

The component uses local state (useState) to track the active team. Extend this to update global context or route based on selection.

const [activeTeam, setActiveTeam] = React.useState(teams[0]);
// On team change: update context, router, or trigger data refetch

Persist selection

Store the selected team ID in localStorage or user profile to restore on next visit.

Use useEffect to restore from storage on mount and save on change.

Header User MenuUser avatar dropdown with profile/exit actions in the top bar.

​When to use

​Usage

​Styling tip

​Steps

When to use

Usage

Styling tip

Steps