Skip to main content
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

1

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" },
];
2

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
3

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.