> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Team Switcher

> Switch context between teams or projects inside the dashboard.

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

## When to use

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

## Usage

```tsx theme={null}
// 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

<Steps>
  <Step title="Provide teams array">
    Define teams with `name`, `logo` (React component), and `plan` fields. Can be static or fetched from Supabase.

    ```tsx theme={null}
    const teams = [
      { name: "Acme Inc", logo: GalleryVerticalEnd, plan: "Enterprise" },
      { name: "Acme Corp.", logo: AudioWaveform, plan: "Startup" },
    ];
    ```
  </Step>

  <Step title="Handle selection">
    The component uses local state (`useState`) to track the active team. Extend this to update global context or route based on selection.

    ```tsx theme={null}
    const [activeTeam, setActiveTeam] = React.useState(teams[0]);
    // On team change: update context, router, or trigger data refetch
    ```
  </Step>

  <Step title="Persist selection">
    Store the selected team ID in localStorage or user profile to restore on next visit.

    <Tip>
      Use `useEffect` to restore from storage on mount and save on change.
    </Tip>
  </Step>
</Steps>